@pardnchiu/nanomd
Version:
NanoMD is a lightweight Markdown editing and viewing library built on pure JavaScript and native APIs. Can be easily embedded into websites, offers rich features, and supports real-time previewing.
2 lines (1 loc) • 17.3 kB
CSS
@keyframes fadeInOut{0%{opacity:1}100%{opacity:1}50%{opacity:.3}}.nanomd-pop{z-index:10000;position:fixed;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;flex-flow:column;gap:.75rem;margin:0 auto;padding:1rem;max-width:12rem;background-color:#fff;box-shadow:0 .5rem 1rem rgba(0,0,0,.1019607843);border-radius:.75rem}.nanomd-pop strong{padding-bottom:.5rem;text-align:center;letter-spacing:1px;font-family:monospace}.nanomd-pop button{display:flex;justify-content:flex-start;align-items:center;gap:.75rem;padding:0 1rem;width:10rem;line-height:2.5rem;font-size:.875rem;letter-spacing:1px;font-family:monospace;background-color:rgba(0,0,0,.0509803922);border-radius:.5rem;transition:.2s}@media screen and (hover: hover){.nanomd-pop button:hover{background-color:rgba(0,0,0,.1019607843)}}.pd-md-editor{position:relative;display:flex;flex-flow:column;justify-content:flex-start;align-items:flex-start;margin:0;padding:1rem 0 50vh;width:100%;font-family:monospace;overflow:scroll}.pd-md-editor span.material-symbols-outlined{font-family:"Material Symbols Outlined" }.pd-md-editor[data-fill="1"]{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%}.pd-md-editor[data-row="1"]::before{content:"";position:fixed;z-index:0;top:0;left:0;bottom:0;width:3rem;background-color:#efefef}.pd-md-editor[data-row="1"]::before>div{padding:0 1rem 0 0}.pd-md-editor[data-row="1"]::before>div::before{content:attr(data-index);margin-right:1rem;flex-shrink:0;width:3rem;line-height:1.5rem;min-height:1.5rem;font-family:monospace;font-size:.75rem;text-align:center}.pd-md-editor[data-pin="1"]{padding:0 0 50vh}.pd-md-editor[data-pin="1"]>section.input-button{z-index:10000;order:0;position:sticky ;display:flex ;top:0;left:0;opacity:1 ;margin:0 0 1rem;padding:0 .5rem;width:inherit;max-width:100%;height:2.75rem;border-radius:0;box-shadow:0 0 0 rgba(0,0,0,0);border-bottom:1px solid rgba(0,0,0,.1019607843)}.pd-md-editor[data-pin="1"]>section.input-button *{flex-shrink:0}.pd-md-editor[data-pin="1"]>section.input-button span[name=keep_off]{color:#44c;transform:rotate(45deg)}.pd-md-editor[data-pin="1"]>section.input-button span.material-symbols-outlined{line-height:2rem}.pd-md-editor[data-pin="1"]>div{order:1}.pd-md-editor[data-wrap="0"]>section.input-button span[name=wrap_text]{color:#000}.pd-md-editor[data-wrap="0"]>div{white-space:nowrap}.pd-md-editor>*{flex-shrink:0}.pd-md-editor>div[data-last="1"]::after{animation:fadeInOut 2s ease-in-out infinite;opacity:1}.pd-md-editor>div[data-last="1"]:empty::after{position:absolute;top:0}.pd-md-editor>div{z-index:1;display:flex;flex-shrink:0;padding:0 1rem;width:100%;min-height:1.5rem;line-height:1.5rem;letter-spacing:1px;word-break:break-word;word-wrap:break-word;font-size:.75rem;margin:0;transition:background-color .2s}.pd-md-editor>div *{flex-shrink:0;pointer-events:none}.pd-md-editor[data-saved="1"]>section.input-button span[name=autorenew]{margin-right:-0.5rem;width:0;opacity:0}.pd-md-editor>section.input-button{z-index:10;display:flex;flex-flow:row;gap:.5rem;align-items:center;margin-left:1rem;margin-bottom:-1.75rem;padding:0 .25rem;max-width:calc(100% - 2rem);font-family:serif;background-color:#fff;border-radius:.25rem;box-shadow:0 2px 6px rgba(0,0,0,.2039215686);opacity:1;transition:.2s;overflow:scroll}.pd-md-editor>section.input-button[data-hide="1"]{display:none}.pd-md-editor>section.input-button>*{flex-shrink:0}.pd-md-editor>section.input-button span[name=wrap_text]{color:#44c}.pd-md-editor>section.input-button span.material-symbols-outlined{line-height:1.75rem;font-size:1.25rem;cursor:pointer;transition:.3s}.pd-md-editor>section.input-button span:not(.material-symbols-outlined){margin:0 .25rem;width:1px;height:.5rem;background-color:rgba(0,0,0,.2039215686)}.pd-md-editor>section.input-button span[name=autorenew]{margin-right:0;width:1.25rem;opacity:1}@media(hover: hover){.pd-md-editor section.input-button i:hover{color:#44c}.pd-md-editor section.input-button span.material-symbols-outlined:hover{color:#44c}}.pd-md-editor *{font-family:inherit}.pd-md-editor[data-mode=dark]{background-color:#272832}.pd-md-editor[data-mode=dark] *{color:#fff}.pd-md-editor[data-mode=dark] section.input-button{background-color:#000;box-shadow:0 2px 6px rgba(255,255,255,.2039215686)}.pd-md-viewer{position:relative;margin:0;padding:1rem 1rem 5rem;font-size:.875rem;line-height:1.75rem;word-break:break-word;word-wrap:break-word}.pd-md-viewer[data-fill="1"]{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;overflow:hidden scroll}.pd-md-viewer>*:nth-child(1){margin-top:0 ;padding-top:0 }.pd-md-viewer span.material-symbols-outlined{font-family:"Material Symbols Outlined" }.pd-md-viewer *{margin:0;padding:0;flex-shrink:0;max-width:100% ;font-family:inherit;font-style:inherit;font-weight:inherit;font-size:.875rem;letter-spacing:.5px;color:inherit;white-space:inherit;word-break:inherit;word-wrap:inherit;border:none;outline:none;object-fit:cover;appearance:unset;-webkit-appearance:unset;-moz-appearance:unset;overflow:visible}.pd-md-viewer *:nth-last-child(1){margin-bottom:0}.pd-md-viewer * h1,.pd-md-viewer * h2,.pd-md-viewer * h3,.pd-md-viewer * h4,.pd-md-viewer * h5,.pd-md-viewer * h6{padding:.5rem 0 .25rem ;margin:.25rem 0 .5rem }.pd-md-viewer * b,.pd-md-viewer * strong,.pd-md-viewer * i,.pd-md-viewer * em,.pd-md-viewer * u,.pd-md-viewer * s,.pd-md-viewer * a,.pd-md-viewer * mark{font-size:inherit ;line-height:inherit }.pd-md-viewer h1,.pd-md-viewer h2,.pd-md-viewer h3,.pd-md-viewer h4,.pd-md-viewer h5,.pd-md-viewer h6{margin-bottom:1rem;font-weight:700;color:#000}.pd-md-viewer h1 code,.pd-md-viewer h2 code,.pd-md-viewer h3 code,.pd-md-viewer h4 code,.pd-md-viewer h5 code,.pd-md-viewer h6 code{line-height:inherit }.pd-md-viewer h1,.pd-md-viewer h2{padding:1.5rem 0 .5rem}.pd-md-viewer h3,.pd-md-viewer h4{padding:1.25rem 0 .25rem}.pd-md-viewer h5,.pd-md-viewer h6{padding:1rem 0 0}.pd-md-viewer h1,.pd-md-viewer h2,.pd-md-viewer hr{border:none;border-bottom:1px solid #ddd}.pd-md-viewer h1{line-height:2.625rem;font-size:2.125rem}.pd-md-viewer h1 code,.pd-md-viewer h1 sup,.pd-md-viewer h1 sub{font-size:calc(2.125rem - 1px)}.pd-md-viewer h2{line-height:2.125rem;font-size:1.625rem}.pd-md-viewer h2 code,.pd-md-viewer h2 sup,.pd-md-viewer h2 sub{font-size:calc(1.625rem - 1px)}.pd-md-viewer h3{line-height:1.825rem;font-size:1.375rem}.pd-md-viewer h3 code,.pd-md-viewer h3 sup,.pd-md-viewer h3 sub{font-size:calc(1.375rem - 1px)}.pd-md-viewer h4{line-height:1.75rem;font-size:1.125rem}.pd-md-viewer h4 code,.pd-md-viewer h4 sup,.pd-md-viewer h4 sub{font-size:calc(1.125rem - 1px)}.pd-md-viewer h5{font-size:1rem}.pd-md-viewer h5 code,.pd-md-viewer h5 sup,.pd-md-viewer h5 sub{font-size:calc(1rem - 1px)}.pd-md-viewer h6{font-size:.875rem}.pd-md-viewer h6 code,.pd-md-viewer h6 sup,.pd-md-viewer h6 sub{font-size:calc(.875rem - 1px)}.pd-md-viewer hr{margin:.75rem 0 ;height:1px}.pd-md-viewer b,.pd-md-viewer strong{font-weight:700}.pd-md-viewer p{line-height:1.75rem;min-height:1.75rem}.pd-md-viewer details{padding-left:1rem;line-height:1.75rem;min-height:1.75rem}.pd-md-viewer details summary{margin-left:-1rem;line-height:1.75rem;min-height:1.75rem;cursor:pointer}.pd-md-viewer i,.pd-md-viewer em{font-style:italic}.pd-md-viewer mark{background-color:#ff0}.pd-md-viewer sup,.pd-md-viewer sub{font-size:.75rem}.pd-md-viewer a{position:relative;letter-spacing:1px;font-weight:500;color:blue}.pd-md-viewer a.tag{display:inline-block;vertical-align:middle;margin-top:.5rem;margin-right:.5rem;padding:0 .5rem;text-decoration:none;font-size:.75rem;background-color:rgba(0,0,0,.0509803922);color:#000;border:1px solid rgba(0,0,0,.0509803922);border-radius:.25rem}.pd-md-viewer a.tag::before{content:"#"}.pd-md-viewer button.more{margin-left:.5rem;padding:0 .5rem;font-size:.75rem;background-color:rgba(0,0,0,.0509803922);border:1px solid rgba(0,0,0,.0509803922);border-radius:.25rem}.pd-md-viewer section.more{position:relative;display:flex;justify-content:center;align-items:center;width:300px;max-width:100%;aspect-ratio:2/1;border:.5px solid rgba(0,0,0,.0117647059);border-radius:.125rem;overflow:hidden}.pd-md-viewer section.more img.cover{position:absolute;top:0;left:0;bottom:0;right:0;width:100%;height:100%;background-color:rgba(0,0,0,.0509803922)}.pd-md-viewer section.more img.icon{z-index:1;width:60px;height:60px;background-color:rgba(0,0,0,0);cursor:pointer}@media(hover: hover){.pd-md-viewer a:hover::after{padding:0 .25rem;max-width:unset;opacity:1}}.pd-md-viewer a::after{content:attr(href);position:absolute;z-index:1;top:100%;left:0;padding:0;max-width:100%;line-height:1.25rem;white-space:nowrap;font-size:.625rem;border-radius:.25rem;background-color:#777;color:#fff;opacity:0;transition:.3s;pointer-events:none}.pd-md-viewer img{margin-bottom:0;border:.5px solid rgba(0,0,0,.0117647059);border-radius:.125rem;overflow:hidden}.pd-md-viewer img[src=""]{background-color:rgba(0,0,0,.0509803922)}.pd-md-viewer video{background-color:rgba(0,0,0,.0509803922)}.pd-md-viewer table{margin-top:.5rem;table-layout:fixed;border-collapse:collapse}.pd-md-viewer table thead{background-color:#f7f7fa}.pd-md-viewer table tbody tr:nth-child(2n-1){background-color:#fff}.pd-md-viewer table tbody tr:nth-child(2n){background-color:#f7f7fa}.pd-md-viewer table th{font-weight:600}.pd-md-viewer table th,.pd-md-viewer table td{padding:.375rem .75rem;min-width:4rem;border:1px solid rgba(0,0,0,.0509803922);border-collapse:collapse;border-radius:.125rem}.pd-md-viewer ul,.pd-md-viewer ol{margin:.5rem 0 .5rem 1.5rem;padding-left:.5rem}.pd-md-viewer ul *,.pd-md-viewer ol *{margin-bottom:0}.pd-md-viewer ul li,.pd-md-viewer ol li{line-height:1.75rem;min-height:1.75rem;list-style-position:outside;letter-spacing:1px}.pd-md-viewer ul li::marker,.pd-md-viewer ol li::marker{font-family:monospace;font-size:.75rem}.pd-md-viewer ul ul,.pd-md-viewer ul ol,.pd-md-viewer ol ul,.pd-md-viewer ol ol{margin-top:0}.pd-md-viewer ul>li{list-style-type:disc}.pd-md-viewer ul>li>ul>li{list-style-type:circle}.pd-md-viewer ul>li>ul>li>ul>li{list-style-type:square}.pd-md-viewer ul>li>ul>li>ul>li>ul>li{list-style-type:"+ "}.pd-md-viewer ul>li>ul>li>ul>li>ul>li>ul>li{list-style-type:"- "}.pd-md-viewer ul>li>ul>li>ul>li>ul>li>ul>li>ul>li{list-style-type:"> "}.pd-md-viewer ol>li{list-style-type:decimal}.pd-md-viewer ol>li>ol>li{list-style-type:upper-alpha}.pd-md-viewer ol>li>ol>li>ol>li{list-style-type:lower-alpha}.pd-md-viewer ol>li>ol>li>ol>li>ol>li{list-style-type:upper-roman}.pd-md-viewer ol>li>ol>li>ol>li>ol>li>ol>li{list-style-type:lower-roman}.pd-md-viewer ol>li>ol>li>ol>li>ol>li>ol>li>ol>li{list-style-type:"> "}.pd-md-viewer li label{display:inline-block;vertical-align:middle;margin-bottom:0}.pd-md-viewer li:has(label){list-style-type:none }.pd-md-viewer input[type=checkbox]{vertical-align:middle;margin-left:-1.5rem;margin-right:.5rem;width:1.25rem;height:1.25rem;appearance:auto;-webkit-appearance:auto;-moz-appearance:auto}.pd-md-viewer code{padding:.125rem .5rem;line-height:1.5rem;min-height:1.5rem;letter-spacing:1px;font-family:monospace ;font-size:.75rem;font-weight:400;background-color:#f7f7fa;border-radius:.25rem;border:.5px solid rgba(0,0,0,.0509803922)}.pd-md-viewer code:has(ol),.pd-md-viewer code:has(ul){padding:0}.pd-md-viewer code *{letter-spacing:1px;font-family:monospace;font-size:.75rem;font-weight:400;margin-bottom:0 }.pd-md-viewer code ol,.pd-md-viewer code ul{margin:0 ;padding:.5rem 1rem;overflow:scroll}.pd-md-viewer code ol li,.pd-md-viewer code ul li{list-style-type:none;line-height:1.25rem;min-height:1.25rem;white-space:nowrap}.pd-md-viewer pre{position:relative;border:none }.pd-md-viewer pre.success code{background-color:#e0ffe1}.pd-md-viewer pre.success code[name]:not([name=""])::before{background-color:#e0ffe1;border-bottom:1px solid #e0ffe1}.pd-md-viewer pre.success button::after{content:"已複製"}.pd-md-viewer pre.error code{background-color:#ffd4d4}.pd-md-viewer pre.error code[name]:not([name=""])::before{background-color:#ffd4d4;border-bottom:1px solid #ffd4d4}.pd-md-viewer pre.error button::after{content:"無法複製"}.pd-md-viewer pre.success button,.pd-md-viewer pre.error button{opacity:1}.pd-md-viewer pre[name]:not([name=""]) button{top:calc(2.375rem - 1px)}@media(hover: hover){.pd-md-viewer pre:not(.success):not(.error):hover code{background-color:#ddd}.pd-md-viewer pre:not(.success):not(.error):hover code[name]:not([name=""])::before{background-color:#ddd;border-bottom:1px solid #ddd;color:#444}.pd-md-viewer pre:not(.success):not(.error):hover button{opacity:1}}.pd-md-viewer pre code{position:relative;display:block;padding:0;margin-bottom:.5rem ;background-color:#f7f7fa;border:.5px solid rgba(0,0,0,.0509803922);transition:.3s}.pd-md-viewer pre code li{line-height:1.75rem}.pd-md-viewer pre code[name]:not([name=""]){margin-top:1.75rem;border-radius:0 .25rem .25rem .25rem}.pd-md-viewer pre code[name]:not([name=""])::before{content:attr(name);position:absolute;left:-1px;top:-1.25rem;padding:0 .5rem;height:1.25rem;line-height:1.25rem;min-height:1.25rem;font-size:.75rem;background-color:#f7f7fa;color:#777;border-radius:.25rem .25rem 0 0;border-top:.5px solid rgba(0,0,0,.0509803922);border-left:.5px solid rgba(0,0,0,.0509803922);border-right:.5px solid rgba(0,0,0,.0509803922);transition:.3s}.pd-md-viewer pre button{position:absolute;top:calc(.75rem - 1px);right:.5rem;padding:0 .5rem;line-height:1.5rem;font-size:.75rem;background-color:#777 ;color:#fff ;border-radius:.25rem;opacity:0;transition:.3s;cursor:pointer}.pd-md-viewer pre button::after{content:"複製代碼";color:#fff }.pd-md-viewer blockquote{margin-bottom:1rem;padding-left:1rem;line-height:1.75rem;min-height:1.75rem;font-style:italic;border-left:.25rem solid #ddd;color:#666;background-color:#fbfbfb}.pd-md-viewer blockquote.NOTE{border-left:.25rem solid #1667c5;background-color:rgba(0,0,0,0);font-style:normal;color:#000}.pd-md-viewer blockquote.NOTE span.hint{color:#1667c5}.pd-md-viewer blockquote.TIP{border-left:.25rem solid #1d7c30;background-color:rgba(0,0,0,0);font-style:normal;color:#000}.pd-md-viewer blockquote.TIP span.hint{color:#1d7c30}.pd-md-viewer blockquote.IMPORTANT{border-left:.25rem solid #7f53cb;background-color:rgba(0,0,0,0);font-style:normal;color:#000}.pd-md-viewer blockquote.IMPORTANT span.hint{color:#7f53cb}.pd-md-viewer blockquote.WARNING{border-left:.25rem solid #95661a;background-color:rgba(0,0,0,0);font-style:normal;color:#000}.pd-md-viewer blockquote.WARNING span.hint{color:#95661a}.pd-md-viewer blockquote.CAUTION{border-left:.25rem solid #ba2929;background-color:rgba(0,0,0,0);font-style:normal;color:#000}.pd-md-viewer blockquote.CAUTION span.hint{color:#ba2929}.pd-md-viewer blockquote span.hint i{margin-right:.375rem;font-style:normal;font-size:.75rem}.pd-md-viewer blockquote span.hint span.material-symbols-outlined{top:-1px;margin-right:.25rem;vertical-align:middle;font-size:1rem}.pd-md-viewer blockquote *{margin-bottom:0;color:inherit}.pd-md-viewer blockquote>br:nth-last-child(1){display:none}.pd-md-viewer iframe{max-width:100%;aspect-ratio:16/9}.pd-md-viewer[data-mode=dark]{background-color:#272832;color:#fff}.pd-md-viewer[data-mode=dark] *{color:#fff}.pd-md-viewer[data-mode=dark] mark{color:#000}.pd-md-viewer[data-mode=dark] a.tag{background-color:#1b1c19;color:#fff;border:1px solid #1b1c19}.pd-md-viewer[data-mode=dark] code{background-color:#1b1c19;border:.5px solid #1b1c19}.pd-md-viewer[data-mode=dark] pre code[name]:not([name=""])::before{background-color:#1b1c19;color:#777;border-top:.5px solid rgba(0,0,0,.0509803922);border-left:.5px solid rgba(0,0,0,.0509803922);border-right:.5px solid rgba(0,0,0,.0509803922);border-bottom:1px solid rgba(0,0,0,0)}.pd-md-viewer[data-mode=dark] table thead{background-color:rgba(0,0,0,.2039215686)}.pd-md-viewer[data-mode=dark] table tbody tr:nth-child(2n-1){background-color:rgba(0,0,0,0)}.pd-md-viewer[data-mode=dark] table tbody tr:nth-child(2n){background-color:rgba(0,0,0,.2039215686)}.pd-md-viewer[data-mode=dark] table th,.pd-md-viewer[data-mode=dark] table td{border:1px solid rgba(255,255,255,.2039215686)}@media(hover: hover){.pd-md-viewer[data-mode=dark] pre:not(.success):not(.error):hover code{background-color:#111}.pd-md-viewer[data-mode=dark] pre:not(.success):not(.error):hover code[name]:not([name=""])::before{background-color:#111;border-bottom:1px solid rgba(0,0,0,0);color:#fff}.pd-md-viewer[data-mode=dark] pre:not(.success):not(.error):hover button{opacity:1}}.pd-md-viewer[data-mode=dark] blockquote{background-color:#222;border-left:.25rem solid #2b4d74}.pd-md-viewer[data-sync="1"]::before{flex-shrink:0;z-index:1000;order:0;position:sticky;display:block;top:0;padding:0 .75rem;width:100%;line-height:1.5rem;text-align:right;font-family:monospace;font-size:.75rem;letter-spacing:.5px;transition:.3s;transition-delay:.5s;transition-property:opacity;opacity:0}.pd-md-viewer[data-autosave="1"]::before{margin-bottom:-1.5rem}.pd-md-viewer[data-autosave="0"][data-saved="0"]::before{content:"unsave";opacity:1}.pd-md-viewer[data-autosave="0"][data-saved="1"]::before{content:"saved";opacity:0}