@opentiny/vue-theme/rich-text-editor/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-rich-text-editor{--tv-RichTextEditor-border-color:var(--tv-color-border, #c2c2c2);--tv-RichTextEditor-line-height:var(--tv-line-height-number, 1.5);--tv-RichTextEditor-icon-color-hover:var(--tv-color-icon-hover, #191919);--tv-RichTextEditor-icon-color-disabled:var(--tv-color-icon-disabled, #c2c2c2);--tv-RichTextEditor-options-bg-color:#ffffff;--tv-RichTextEditor-options-box-shadow:var(--tv-shadow-3-down, 0 4px 16px 0 rgba(0, 0, 0, 0.08));--tv-RichTextEditor-options-border-radius:var(--tv-border-radius-md, 6px);--tv-RichTextEditor-options-text-color:var(--tv-color-text, #191919);--tv-RichTextEditor-options-item-bg-color:var(--tv-color-bg-hover, #f5f5f5);height:100%}.tiny-rich-text-editor strong{font-weight:700}.tiny-rich-text-editor em{font-style:italic}.tiny-rich-text-editor a,.tiny-rich-text-editor a:hover{text-decoration:underline}.tiny-rich-text-editor h1{font-size:2em;-webkit-margin-before:.67em;margin-block-start:.67em;-webkit-margin-after:.67em;margin-block-end:.67em;font-weight:700}.tiny-rich-text-editor h2{font-size:1.5em;-webkit-margin-before:.83em;margin-block-start:.83em;-webkit-margin-after:.83em;margin-block-end:.83em;font-weight:700}.tiny-rich-text-editor h3{font-size:1.17em;-webkit-margin-before:1em;margin-block-start:1em;-webkit-margin-after:1em;margin-block-end:1em;font-weight:700}.tiny-rich-text-editor h4{-webkit-margin-before:1.33em;margin-block-start:1.33em;-webkit-margin-after:1.33em;margin-block-end:1.33em;font-weight:700}.tiny-rich-text-editor h5{font-size:.83em;-webkit-margin-before:1.67em;margin-block-start:1.67em;-webkit-margin-after:1.67em;margin-block-end:1.67em}.tiny-rich-text-editor h6{font-size:.83em;-webkit-margin-before:1.67em;margin-block-start:1.67em;-webkit-margin-after:1.67em;margin-block-end:1.67em}.tiny-rich-text-editor__toolbar{padding:8px;border:1px solid var(--tv-RichTextEditor-border-color)}.tiny-rich-text-editor__toolbar button{height:24px;padding:.25rem;margin-right:.25rem;border:none;border-radius:.4rem;background:0 0;cursor:pointer}.tiny-rich-text-editor__toolbar button input,.tiny-rich-text-editor__toolbar button svg{cursor:pointer}.tiny-rich-text-editor__toolbar button.is-active,.tiny-rich-text-editor__toolbar button:not(:disabled):hover{background-color:#d2e4ff}.tiny-rich-text-editor__toolbar button.is-active path,.tiny-rich-text-editor__toolbar button.is-active svg,.tiny-rich-text-editor__toolbar button:not(:disabled):hover path,.tiny-rich-text-editor__toolbar button:not(:disabled):hover svg{fill:var(--tv-RichTextEditor-icon-color-hover)}.tiny-rich-text-editor__toolbar button:hover{background-color:#d2e4ff}.tiny-rich-text-editor__toolbar button:disabled{cursor:not-allowed}.tiny-rich-text-editor__toolbar button:disabled svg{fill:var(--tv-RichTextEditor-icon-color-disabled)}.tiny-rich-text-editor .tiny-svg{width:18px;height:18px;vertical-align:middle;overflow:hidden;display:inline-block}.tiny-rich-text-editor .tippy-box .tippy-content .bubble-menu button{border-width:1px;border-left:none}.tiny-rich-text-editor .tippy-box .tippy-content .bubble-menu:nth-child(1){border-left-width:1px}.tiny-rich-text-editor .h-box{position:relative}.tiny-rich-text-editor .h-box .h-options{position:absolute;padding:.15rem;background-color:var(--tv-RichTextEditor-options-bg-color);left:0;display:none;border-radius:var(--tv-RichTextEditor-options-border-radius);-webkit-box-shadow:var(--tv-RichTextEditor-options-box-shadow);box-shadow:var(--tv-RichTextEditor-options-box-shadow);z-index:999}.tiny-rich-text-editor .h-box .h-options button{color:#000;margin:0;text-align:center;line-height:var(--tv-RichTextEditor-line-height)}.tiny-rich-text-editor .h-box .h-options button path,.tiny-rich-text-editor .h-box .h-options button svg{fill:#000}.tiny-rich-text-editor .h-box:hover .h-options{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-rich-text-editor .h-box:hover .h-options button{width:auto}.tiny-rich-text-editor .table-button .table-box{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative}.tiny-rich-text-editor .table-button .table-box .table-icon{display:inline-block}.tiny-rich-text-editor .table-button .table-box .table-panel{position:absolute;background:#fff;left:0;top:1.25rem;z-index:999;border-top:1px solid #ccc;border-left:1px solid #ccc}.tiny-rich-text-editor .table-button .table-box .table-panel .table-row{display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-rich-text-editor .table-button .table-box .table-panel .item{width:30px;height:30px;-webkit-box-sizing:border-box;box-sizing:border-box;border-right:1px solid #ccc;border-bottom:1px solid #ccc}.tiny-rich-text-editor .table-button .table-box .table-panel .isActive{background-color:rgba(32,122,183,.5);border-color:rgba(32,122,183,.5)}.tiny-rich-text-editor .table-button:hover .table-box .table-icon{background-color:#d2e4ff}.tiny-rich-text-editor .color-button{position:relative;padding-right:1.2rem}.tiny-rich-text-editor .color-button #tiny-back-color,.tiny-rich-text-editor .color-button #tiny-color{position:absolute;border-radius:50%;height:18px;width:18px;border:0;top:4px}.tiny-rich-text-editor .color-button:hover #tiny-back-color,.tiny-rich-text-editor .color-button:hover #tiny-color{background-color:#d2e4ff}.tiny-rich-text-editor .image-button{position:relative}.tiny-rich-text-editor .image-button .img-option{position:absolute;background-color:#dfdede;border-radius:.4rem;display:none}.tiny-rich-text-editor .image-button .img-option .img-item{white-space:nowrap;height:24px;line-height:24px;padding:.25rem;border-radius:.4rem}.tiny-rich-text-editor .image-button .img-option .img-item:hover{background-color:#d2e4ff}.tiny-rich-text-editor .image-button:hover .img-option{display:block}.tiny-rich-text-editor .image-button input{position:absolute;height:100%;left:0;opacity:0;width:0}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .line-height-button{position:relative}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .line-height-button .line-height-options{position:absolute;padding:.15rem;background-color:var(--tv-RichTextEditor-options-bg-color);left:0;display:none;border-radius:var(--tv-RichTextEditor-options-border-radius);-webkit-box-shadow:var(--tv-RichTextEditor-options-box-shadow);box-shadow:var(--tv-RichTextEditor-options-box-shadow);z-index:999}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .line-height-button .line-height-options button{color:#000;margin:0;text-align:center;line-height:var(--tv-RichTextEditor-line-height)}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .line-height-button .line-height-options button:hover{background-color:var(--tv-RichTextEditor-options-item-bg-color);color:var(--tv-RichTextEditor-options-text-color)}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .line-height-button:hover .line-height-options{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .line-height-button:hover .line-height-options button{width:auto}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .font-size-box{position:relative}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .font-size-box .font-size-options{display:none;position:absolute;border-radius:var(--tv-RichTextEditor-options-border-radius);background-color:var(--tv-RichTextEditor-options-bg-color);-webkit-box-shadow:var(--tv-RichTextEditor-options-box-shadow);box-shadow:var(--tv-RichTextEditor-options-box-shadow);z-index:99}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .font-size-box .font-size-options button{color:#000;margin:0;text-align:center;line-height:var(--tv-RichTextEditor-line-height)}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .font-size-box .font-size-options button:hover{background-color:var(--tv-RichTextEditor-options-item-bg-color);color:var(--tv-RichTextEditor-options-text-color)}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .font-size-box:hover{background-color:var(--tv-RichTextEditor-options-item-bg-color)}.tiny-rich-text-editor .tiny-rich-text-editor__toolbar .font-size-box:hover .font-size-options{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-rich-text-editor .bubble-menu button{background-color:#f1f3f5}.tiny-rich-text-editor .ProseMirror{outline:0!important}.tiny-rich-text-editor .ProseMirror>*+*{margin-top:.75em}.tiny-rich-text-editor .ProseMirror ol,.tiny-rich-text-editor .ProseMirror ul{padding:0 1rem}.tiny-rich-text-editor .ProseMirror ol{list-style:auto}.tiny-rich-text-editor .ProseMirror ul{list-style:disc}.tiny-rich-text-editor .ProseMirror h1,.tiny-rich-text-editor .ProseMirror h2,.tiny-rich-text-editor .ProseMirror h3,.tiny-rich-text-editor .ProseMirror h4,.tiny-rich-text-editor .ProseMirror h5,.tiny-rich-text-editor .ProseMirror h6{line-height:1.1}.tiny-rich-text-editor .ProseMirror p{margin:0;line-height:1.5}.tiny-rich-text-editor .ProseMirror p[level='1']{line-height:1}.tiny-rich-text-editor .ProseMirror p[level='1.5']{line-height:1.5}.tiny-rich-text-editor .ProseMirror p[level='2']{line-height:2}.tiny-rich-text-editor .ProseMirror p[level='2.5']{line-height:2.5}.tiny-rich-text-editor .ProseMirror code{background-color:rgba(97,97,97,.1);color:#616161}.tiny-rich-text-editor .ProseMirror img{max-width:100%}.tiny-rich-text-editor .ProseMirror blockquote{padding-left:1rem;border-left:2px solid rgba(13,13,13,.1)}.tiny-rich-text-editor .ProseMirror hr{border:none;border-top:2px solid rgba(13,13,13,.1);margin:2rem 0}.tiny-rich-text-editor .ProseMirror .img-button{resize:both;overflow:hidden}.tiny-rich-text-editor .ProseMirror .img-button video{width:100%}.tiny-rich-text-editor .ProseMirror .img-button img{width:100%}.tiny-rich-text-editor .ProseMirror table{border-collapse:collapse;table-layout:fixed;width:100%;margin:0;overflow:hidden}.tiny-rich-text-editor .ProseMirror table td,.tiny-rich-text-editor .ProseMirror table th{min-width:1em;border:2px solid #ced4da;padding:3px 5px;vertical-align:top;-webkit-box-sizing:border-box;box-sizing:border-box;position:relative}.tiny-rich-text-editor .ProseMirror table td>*,.tiny-rich-text-editor .ProseMirror table th>*{margin-bottom:0}.tiny-rich-text-editor .ProseMirror table th{font-weight:700;text-align:left;background-color:#f1f3f5}.tiny-rich-text-editor .ProseMirror table .selectedCell:after{z-index:2;position:absolute;content:'';left:0;right:0;top:0;bottom:0;background:#c8c8ff66;pointer-events:none}.tiny-rich-text-editor .ProseMirror table .column-resize-handle{position:absolute;right:-2px;top:0;bottom:-2px;width:4px;background-color:#adf;pointer-events:none}.tiny-rich-text-editor .ProseMirror table p{margin:0}.tiny-rich-text-editor .ProseMirror .tableWrapper{padding:1rem 0;overflow-x:auto}.tiny-rich-text-editor .ProseMirror .resize-cursor{cursor:ew-resize;cursor:col-resize}.tiny-rich-text-editor .ProseMirror ul[data-type=taskList]{list-style:none;padding:0}.tiny-rich-text-editor .ProseMirror ul[data-type=taskList] li{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-rich-text-editor .ProseMirror ul[data-type=taskList] li>label{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;margin-right:.5rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.tiny-rich-text-editor .ProseMirror ul[data-type=taskList] li>div{-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto}.tiny-rich-text-editor .ProseMirror .code-block{position:relative}.tiny-rich-text-editor .ProseMirror .code-block select{position:absolute;top:.5rem;right:.5rem;border:0;background:gray;border-radius:4px}.tiny-rich-text-editor .ProseMirror pre{background:#0d0d0d;color:#fff;font-family:JetBrainsMono,monospace;padding:.75rem 1rem;border-radius:.5rem}.tiny-rich-text-editor .ProseMirror pre code{color:inherit;padding:0;background:0 0;font-size:.8rem}.tiny-rich-text-editor .ProseMirror pre .hljs-comment,.tiny-rich-text-editor .ProseMirror pre .hljs-quote{color:#616161}.tiny-rich-text-editor .ProseMirror pre .hljs-attribute,.tiny-rich-text-editor .ProseMirror pre .hljs-link,.tiny-rich-text-editor .ProseMirror pre .hljs-name,.tiny-rich-text-editor .ProseMirror pre .hljs-regexp,.tiny-rich-text-editor .ProseMirror pre .hljs-selector-class,.tiny-rich-text-editor .ProseMirror pre .hljs-selector-id,.tiny-rich-text-editor .ProseMirror pre .hljs-tag,.tiny-rich-text-editor .ProseMirror pre .hljs-template-variable,.tiny-rich-text-editor .ProseMirror pre .hljs-variable{color:#f98181}.tiny-rich-text-editor .ProseMirror pre .hljs-built_in,.tiny-rich-text-editor .ProseMirror pre .hljs-builtin-name,.tiny-rich-text-editor .ProseMirror pre .hljs-literal,.tiny-rich-text-editor .ProseMirror pre .hljs-meta,.tiny-rich-text-editor .ProseMirror pre .hljs-number,.tiny-rich-text-editor .ProseMirror pre .hljs-params,.tiny-rich-text-editor .ProseMirror pre .hljs-type{color:#fbbc88}.tiny-rich-text-editor .ProseMirror pre .hljs-bullet,.tiny-rich-text-editor .ProseMirror pre .hljs-string,.tiny-rich-text-editor .ProseMirror pre .hljs-symbol{color:#b9f18d}.tiny-rich-text-editor .ProseMirror pre .hljs-section,.tiny-rich-text-editor .ProseMirror pre .hljs-title{color:#faf594}.tiny-rich-text-editor .ProseMirror pre .hljs-keyword,.tiny-rich-text-editor .ProseMirror pre .hljs-selector-tag{color:#70cff8}.tiny-rich-text-editor .ProseMirror pre .hljs-emphasis{font-style:italic}.tiny-rich-text-editor .ProseMirror pre .hljs-strong{font-weight:700}.tiny-rich-text-editor~.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:#9a9a9a;pointer-events:none;height:0}.tiny-rich-text-editor__container{overflow:auto;padding:10px;height:100%;border:1px solid var(--tv-RichTextEditor-border-color);border-top:0}.tiny-rich-text-editor__container::-webkit-scrollbar{width:4px;height:0}.tiny-rich-text-editor__container::-webkit-scrollbar-thumb{background-color:#000;border-radius:8px}.tiny-rich-text-editor .tiny-image__node__view{display:inline-block;margin:0 5px}.tiny-rich-text-editor .tiny-image__view{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid transparent;display:inline-block;max-width:100%}.tiny-rich-text-editor .tiny-image__handle{display:inline-block;width:10px;height:10px;background:#d2e4ff;position:absolute}.tiny-rich-text-editor .tiny-image__resize{border:2px solid var(--tv-RichTextEditor-border-color);left:0;position:absolute;top:0;z-index:1}.tiny-rich-text-editor .tiny-image__resize__tl{left:-5px;top:-5px;cursor:nwse-resize}.tiny-rich-text-editor .tiny-image__resize__tr{right:-5px;top:-5px;cursor:nesw-resize}.tiny-rich-text-editor .tiny-image__resize__bl{left:-5px;bottom:-5px;cursor:nesw-resize}.tiny-rich-text-editor .tiny-image__resize__br{right:-5px;bottom:-5px;cursor:nwse-resize}