stream-markdown-render/dist/style.css

Vue3 Markdown rendering component without repaint

pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#23241f;color:#f8f8f2}.hljs-tag,.hljs-subst{color:#f8f8f2}.hljs-strong,.hljs-emphasis{color:#a8a8a2}.hljs-bullet,.hljs-quote,.hljs-number,.hljs-regexp,.hljs-literal,.hljs-link{color:#ae81ff}.hljs-code,.hljs-title,.hljs-section,.hljs-selector-class{color:#a6e22e}.hljs-strong{font-weight:700}.hljs-emphasis{font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-name,.hljs-attr{color:#f92672}.hljs-symbol,.hljs-attribute{color:#66d9ef}.hljs-params,.hljs-title.class_,.hljs-class .hljs-title{color:#f8f8f2}.hljs-string,.hljs-type,.hljs-built_in,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-addition,.hljs-variable,.hljs-template-variable{color:#e6db74}.hljs-comment,.hljs-deletion,.hljs-meta{color:#75715e}.md_markdown-render{width:100%;line-height:1.2}.md_markdown-render h1,.md_markdown-render h2,.md_markdown-render h3,.md_markdown-render h4,.md_markdown-render h5,.md_markdown-render h6{margin:8px 0;font-weight:500}.md_markdown-render hr{margin:1em 0;border:none;border-top:1px solid #e0e0e0}.md_markdown-render h1{font-size:1.25em;line-height:1.8}.md_markdown-render h2{font-size:1.2em;line-height:1.6}.md_markdown-render h3{font-size:1.1em;line-height:1.4}.md_markdown-render p{padding:0;margin:8px 0;line-height:1.4}.md_markdown-render ul,.md_markdown-render ol{padding-left:2em;margin:.5em 0}.md_markdown-render li{margin:.5em 0;line-height:1.4}.md_markdown-render ul li{list-style-type:disc}.md_markdown-render ol li{list-style-type:decimal}.md_markdown-render blockquote{padding:.5em 1em;margin:1em 0;background-color:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-left:4px solid #b7b6b6}.md_markdown-render table{width:100%;margin:1em 0;border-collapse:collapse}.md_markdown-render th,.md_markdown-render td{padding:8px;text-align:left;border:1px solid #ddd}.md_markdown-render th{background-color:#0b2448a3}.md_toolbar{position:absolute;top:0;right:0;z-index:10;display:flex;gap:4px;align-items:center;justify-content:flex-end;padding:10px;margin-bottom:10px}.md_toolbar .md_toolbar-btn{padding:6px;cursor:pointer;background:none;border:none;border-radius:4px;transition:all .3s}.md_toolbar .md_toolbar-btn:hover{box-shadow:0 2px 6px #0000001a}.md_toolbar .md_toolbar-btn i{display:flex;align-items:center;justify-content:center;font-size:16px}.md_error-message{position:absolute;top:12px;right:12px;bottom:12px;left:12px;z-index:100;box-sizing:border-box;display:flex;gap:8px;align-items:center;padding:16px;font-size:14px;line-height:1.5;color:#f5222d;background:#fff2f0;border:1px solid #ffccc7;border-radius:8px}.md_error-message i{flex-shrink:0;font-size:18px}.md_loading-block{position:relative;width:100%;height:400px}.md_loading-wrapper{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1000;box-sizing:border-box;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;width:100%;height:100%;padding:32px;background:#fafafa58;border-radius:8px}.md_loading-wrapper .md_loading-spinner{width:32px;height:32px;border:3px solid #f3f3f3;border-top:3px solid #2a6ee9;border-radius:50%;animation:spin 1s linear infinite}.md_loading-wrapper .md_loading-text{font-size:24px;font-weight:700;font-weight:500;color:#fff}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.md_code-wrapper{position:relative;width:100%;height:400px}.md_no-end-content{position:absolute;top:0;left:0;z-index:100;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:32px;overflow:hidden;color:#fff;background:#1e1e1e;border-radius:8px}.md_no-end-content .md_code-block{width:100%;max-height:400px;overflow:hidden;overflow-y:auto;background:#2d2d2d;border-radius:8px;box-shadow:0 4px 16px #0003}.md_no-end-content .md_code-header{position:absolute;top:0;left:0;z-index:100;display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 16px;background:#1e1e1e;border-bottom:1px solid #4d4d4d}.md_no-end-content .md_code-header .md_code-title{font-size:14px;font-weight:500;color:#ccc}.md_no-end-content .md_code-header .md_code-controls{display:flex;gap:8px}.md_no-end-content .md_code-header .md_control{width:12px;height:12px;border-radius:50%}.md_no-end-content .md_code-header .md_control.close{background:#ff5f56}.md_no-end-content .md_code-header .md_control.minimize{background:#ffbd2e}.md_no-end-content .md_code-header .md_control.maximize{background:#27c93f}.md_no-end-content .md_code-content{position:absolute;bottom:0;padding:16px;margin:0;font-family:Fira Code,Consolas,monospace;font-size:14px;line-height:1.5;color:#00b176}.md_no-end-content .md_code-content::-webkit-scrollbar{width:8px;height:8px}.md_no-end-content .md_code-content::-webkit-scrollbar-track{background:#2d2d2d}.md_no-end-content .md_code-content::-webkit-scrollbar-thumb{background:#4d4d4d;border-radius:4px}.md_no-end-content .md_code-content::-webkit-scrollbar-thumb:hover{background:#5d5d5d}.md_table-render{width:100%;overflow-x:auto}.md-fence-block{position:relative;display:flex;flex-direction:column;width:100%;max-height:400px;margin:1em 0;overflow:hidden;border-radius:8px}.md-fence-block .md-fence-title{flex-shrink:0;padding:8px 16px;color:#fff;background:#1e1e1e;border-bottom:1px solid #4d4d4d}.md-fence-block .md-fence-content{flex:1;padding:16px;margin:0;overflow:auto;font-family:Fira Code,Consolas,monospace;font-size:14px;color:#fff;background:#2d2d2d}.md-fence-block ::-webkit-scrollbar{width:6px}.md-fence-block ::-webkit-scrollbar:horizontal{height:6px}.md-fence-block ::-webkit-scrollbar-track{border-radius:10px}.md-fence-block ::-webkit-scrollbar-thumb{background-color:#fff3;border-radius:10px;transition:all .2s ease-in-out}.md-fence-block ::-webkit-scrollbar-thumb:hover{cursor:pointer;background-color:#d5cece}.md_custom-render{position:relative;width:100%;height:400px;margin:1em 0}.md_custom-render .md_custom-container{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:hidden;background:transparent;border-radius:4px}.md_custom-render .md_custom-container.is-fullscreen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;margin:0;background:#ffffff4d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.md_custom-render .md_custom-instance{position:absolute;width:100%;height:100%}