@8btc/mditor 0.0.1

package/src/assets/less/_reset.less

@@ -0,0 +1,628 @@
+.vditor {
+    &-reset {
+        &--anchor {
+            padding-left: 1.25rem;
+        }
+
+        &--error {
+            color: @errorColor;
+            font-size: 0.75rem;
+            display: block;
+            line-height: 1.00rem;
+        }
+
+        color: @primaryColor;
+        font-variant-ligatures: no-common-ligatures;
+        font-family: @font-family-base;
+        word-wrap: break-word;
+        line-height: 180%;
+        font-size: 1rem;
+        word-break: break-word;
+
+        ul ul ul {
+            list-style-type: square;
+        }
+
+        ul ul {
+            list-style-type: circle;
+        }
+
+        ul {
+            list-style-type: disc;
+        }
+
+        ul,
+        ol {
+            padding-left: 2em;
+            margin-top: 0;
+            margin-bottom: 1.00rem;
+        }
+        li::marker {
+            color: #737373;
+        }
+        
+
+        li + li {
+            // margin-top: 0.25em;
+        }
+
+        li p {
+            margin-top: 1.00rem;
+        }
+
+        audio {
+            max-width: 100%;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        video {
+            max-height: 90vh;
+            max-width: 100%;
+        }
+
+        img {
+            max-width: 100%;
+        }
+
+        img.emoji {
+            cursor: auto;
+            max-width: 1.25rem;
+            vertical-align: sub;
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-top: 1.50rem;
+            margin-bottom: 1.00rem;
+            font-weight: 600;
+            text-align: left;
+
+            &:hover .vditor-anchor svg {
+                visibility: visible;
+            }
+        }
+
+        h1 {
+            font-size: 1.88rem;
+            line-height: 2.60rem;
+        }
+
+        h2 {
+            font-size: 1.50rem;
+            line-height: 2.00rem;
+        }
+
+        h3 {
+            font-size: 1.13rem;
+            line-height: 1.60rem;
+        }
+
+        h4 {
+            font-size: 1.00rem;
+            line-height: 1.40rem;
+        }
+
+        h5 {
+            font-size: 1.00rem;
+            line-height: 1.30rem;
+        }
+
+        h6 {
+           font-size: 1.00rem;
+           line-height: 1.20rem;
+        }
+
+        hr {
+            height: 1px;
+            padding: 0;
+            margin: 1.50rem 0;
+            background-color: #e5e5e5;
+            border: 0;
+        }
+
+        p {
+            margin-top: 0;
+            margin-bottom: 1.00rem;
+        }
+
+        blockquote {
+            padding: 0 1em;
+            color: #737373;
+            border-left: 2px solid #e5e5e5;
+            margin: 0 0 1.00rem 0;
+            padding: 0.20rem 0.20rem 0.20rem 1rem;
+            font-size:0.875rem;
+            p {
+                margin-bottom: 0.25rem;
+            }
+            & > :first-child {
+                margin-top: 0;
+            }
+
+            & > :last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        ins > iframe {
+            border: 0;
+        }
+
+        iframe {
+            border: 1px solid #d1d5da;
+            max-width: 100%;
+            box-sizing: border-box;
+
+            &.iframe__video {
+                min-width: 80%;
+                min-height: 36vh;
+            }
+        }
+
+        table {
+            border-collapse: collapse;
+            empty-cells: show;
+            margin-bottom: 1.50rem;
+            overflow: auto;
+            border-spacing: 0;
+            display: block;
+            word-break: keep-all;
+            width: 100%;
+            min-width: 480px;
+            font-size: 0.875rem;
+
+            td,
+            th {
+                padding: 0.63rem 1.00rem;
+                word-break: normal;
+                white-space: nowrap;
+
+                &:first-child::after {
+                    content: "";
+                    display: inline-block;
+                    vertical-align: top;
+                    min-height: 1.50rem;
+                }
+            }
+
+            th {
+                font-weight: 500;
+            }
+
+            // tbody tr:nth-child(2n) {
+            //     background-color: #fff;
+            // }
+        }
+
+        code:not(.hljs):not(.highlight-chroma) {
+            padding: 0.2em 0.4em;
+            margin: 0;
+            font-size: 85%;
+            border-radius: 0.25rem;
+            font-family: @font-family-code;
+            word-break: break-word;
+            background-size: 1.25rem 1.25rem;
+            white-space: pre-wrap;
+        }
+
+        pre {
+            margin: 1em 0;
+
+            & > code {
+                margin: 0;
+                font-size: 85%;
+                padding: 0.5em;
+                border-radius: 0.31rem;
+                display: block;
+                overflow: auto;
+                white-space: pre;
+                font-family: @font-family-code;
+                background-size: 1.25rem 1.25rem;
+                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8AgMAAABHkjHhAAAACVBMVEWAgIBaWlo+Pj7rTFvWAAAAA3RSTlMHCAw+VhR4AAAA+klEQVQoz4WSMW7EQAhFPxKWNh2FCx+HkaZI6RRb5DYbyVfIJXLKDCFoMbaTKSw/8ZnPAPjaH2xgZcUNUDADD7D9LtDBCLZ45fbkvo/30K8yeI64pPwl6znd/3n/Oe93P3ho9qeh72btTFzqkz0rsJle8Zr81OLEwZ1dv/713uWqvu2pl+k0fy7MWtj9r/tN5q/02z89qa/L4Dc2LvM93kezPfXlME/O86EbY/V9GB9ePX8G1/6W+/9h1dq/HGfTfzT3j/xNo7522Bfnqe5jO/fvhVthlfk434v3iO9zG/UOphyPeinPl1J8Gtaa7xPTa/Dk+RIs4deMvwGvcGsmsCvJ0AAAAABJRU5ErkJggg==);
+                word-break: initial;
+                word-wrap: normal;
+            }
+
+            &:hover div.vditor-copy {
+                display: block;
+            }
+        }
+
+        .language-math,
+        .language-echarts,
+        .language-mindmap,
+        .language-plantuml,
+        .language-mermaid,
+        .language-smiles,
+        .language-markmap,
+        .language-abc,
+        .language-flowchart,
+        .language-graphviz {
+            margin-bottom: 1.00rem;
+        }
+
+        .language-math {
+            mjx-container:focus {
+                outline: none;
+                cursor: context-menu;
+            }
+
+            .katex-display > .katex > .katex-html > .tag {
+                display: inline-block;
+                font-size: 1.21rem;
+                right: 2px;
+            }
+        }
+
+        .language-echarts,
+        .language-mindmap {
+            overflow: hidden;
+            height: 26.25rem;
+        }
+
+        .language-mermaid,
+        .language-markmap,
+        .language-flowchart,
+        .language-graphviz {
+            text-align: center;
+        }
+
+        .language-graphviz parsererror {
+            overflow: auto;
+        }
+
+        kbd {
+            display: inline-block;
+            padding: 0.25rem 0.31rem;
+            font: 0.69rem Consolas, "Liberation Mono", Menlo, Courier, monospace;
+            line-height: 0.63rem;
+            color: @primaryColor;
+            vertical-align: middle;
+            background-color: #fafbfc;
+            border: solid 1px #d1d5da;
+            border-radius: 0.25rem;
+            box-shadow: inset 0 -1px 0 #d1d5da;
+        }
+
+        summary {
+            cursor: pointer;
+
+            &:focus {
+                outline: none;
+            }
+        }
+
+        svg {
+            height: auto;
+            width: auto;
+            stroke-width: initial;
+        }
+
+        p:last-child,
+        blockquote:last-child,
+        pre:last-child,
+        ul:last-child,
+        ol:last-child,
+        hr:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    &-comment {
+        border-bottom: 2px solid rgb(248, 230, 171);
+
+        &--focus,
+        &--hover {
+            background-color: rgb(250, 241, 209);
+            border-bottom: 2px solid rgb(255, 198, 10);
+
+            .vditor-comment {
+                border-bottom: 2px solid rgb(255, 198, 10);
+            }
+        }
+    }
+
+    &-task {
+        list-style: none !important;
+        word-break: break-all;
+
+        input {
+            margin: 0 0.2em 0.25em -1.6em;
+            font-size: 0.75rem;
+            vertical-align: middle;
+        }
+    }
+
+    &-copy {
+        position: relative;
+        display: none;
+        z-index: 1;
+
+        textarea {
+            position: absolute;
+            left: -6250.00rem;
+            height: 0.63rem;
+        }
+
+        span {
+            cursor: pointer;
+            position: absolute;
+            right: 0.94rem;
+            top: 0.5em;
+        }
+
+        svg {
+            color: #586069;
+            height: 0.88rem;
+            width: 0.88rem !important;
+            display: block;
+            fill: currentColor;
+        }
+    }
+
+    &-linenumber {
+        padding-left: 4em !important;
+        position: relative;
+
+        &__rows {
+            position: absolute;
+            pointer-events: none;
+            top: 1em;
+            left: 0;
+            width: 3em; /* works for line-numbers below 1000 lines */
+            user-select: none;
+            counter-reset: linenumber;
+
+            & > span {
+                pointer-events: none;
+                display: block;
+
+                &::before {
+                    counter-increment: linenumber;
+                    content: counter(linenumber);
+                    color: rgba(158, 150, 150, 0.38);
+                    display: block;
+                    padding-right: 1em;
+                    text-align: right;
+                }
+            }
+        }
+    }
+
+    &-speech {
+        position: absolute;
+        display: none;
+        background-color: #f6f8fa;
+        border: 1px solid #d1d5da;
+        border-radius: 0.25rem;
+        padding: 0.25rem;
+        cursor: pointer;
+        color: #586069;
+
+        &:hover,
+        &--current {
+            color: #4285f4;
+        }
+
+        svg {
+            height: 0.88rem;
+            width: 0.88rem;
+            fill: currentColor;
+            display: block;
+            stroke-width: 0;
+            stroke: currentColor;
+        }
+    }
+
+    &-anchor {
+        margin-left: 0.31rem;
+
+        &--left {
+            float: left;
+            padding-right: 0.25rem;
+            margin-left: -1.25rem;
+        }
+
+        svg {
+            visibility: hidden;
+        }
+
+        &:hover {
+            svg {
+                visibility: visible;
+            }
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    &-linkcard {
+        margin: 1.94rem auto 1.00rem;
+        transition: @transition;
+        cursor: pointer;
+        max-width: 48.00rem;
+        padding: 0 0.63rem;
+
+        a {
+            border-radius: 0.25rem;
+            background-color: #f6f8fa;
+            overflow: hidden;
+            max-height: 15.63rem;
+            display: flex;
+            text-decoration: none;
+            flex-wrap: wrap-reverse;
+            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+
+            &:hover {
+                box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.13), 0 0.25rem 0.38rem rgba(0, 0, 0, 0.26);
+                text-decoration: none;
+            }
+
+            &:visited .vditor-linkcard__abstract {
+                color: rgba(88, 96, 105, 0.36);
+            }
+        }
+
+        &__info {
+            padding: 0.63rem;
+            min-width: 12.50rem;
+            box-sizing: border-box;
+            flex: 1;
+        }
+
+        &__title {
+            font-size: 0.88rem;
+            font-weight: 400;
+            color: @primaryColor;
+            display: flex;
+            align-items: center;
+
+            img {
+                cursor: pointer;
+                height: 1.25rem;
+                width: 1.25rem;
+                border-radius: 0.25rem;
+                flex-shrink: 0;
+                margin-right: 0.31rem;
+            }
+        }
+
+        &__abstract {
+            word-wrap: break-word;
+            word-break: break-all;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-box-orient: vertical;
+            display: -webkit-box;
+            font-size: 0.81rem;
+            color: #586069;
+            margin: 0.31rem 0;
+        }
+
+        &__site {
+            font-size: 0.75rem;
+            color: #4285f4;
+        }
+
+        &__image {
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center center;
+            max-width: 15.63rem;
+            min-width: 7.88rem;
+            cursor: pointer;
+            background-color: rgba(88, 96, 105, 0.36);
+        }
+    }
+
+    &-footnotes__goto-ref {
+        text-decoration: none;
+    }
+
+    &-toc {
+        margin-bottom: 1.00rem;
+        user-select: text;
+        color: @primaryColor;
+
+        .vditor-outline__action {
+            display: none;
+        }
+
+        ul {
+            list-style: none !important;
+            padding-left: 1em;
+        }
+
+        & > ul {
+            padding-left: 0;
+        }
+
+        span {
+            cursor: pointer;
+        }
+
+        li > span > svg {
+            width: 0;
+            height: 0;
+        }
+    }
+
+    &-outline {
+        width: 15.63rem;
+        border-right: 1px solid var(--border-color);
+        background-color: var(--panel-background-color);
+        display: none;
+        overflow: auto;
+
+        &--right {
+            border-right: 0;
+            border-left: 1px solid var(--border-color);
+        }
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        ul {
+            list-style: none !important;
+            padding-left: 1em;
+            margin: 0;
+        }
+
+        &__content > ul {
+            padding-left: 0;
+        }
+
+        li > span {
+            display: flex;
+            align-items: center;
+            padding: 0.31rem 0.63rem;
+            cursor: pointer;
+            color: var(--textarea-text-color);
+
+            & > svg {
+                height: 0.63rem;
+                width: 0.63rem;
+                flex-shrink: 0;
+            }
+
+            &:hover {
+                color: var(--toolbar-icon-hover-color);
+            }
+
+            & > span {
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+
+        &__title {
+            border-bottom: 1px dashed var(--border-color);
+            padding: 0.31rem 0.63rem;
+            color: var(--toolbar-icon-color);
+            font-size: 0.75rem;
+        }
+
+        &__action {
+            transition: @transition;
+            fill: currentColor;
+            margin-right: 0.31rem;
+            flex-shrink: 0;
+
+            &--close {
+                transform: rotate(-90deg);
+            }
+        }
+    }
+}