neko-ui 0.0.5

package/es/markdown/md.less

@@ -0,0 +1,455 @@
+.markdown-box {
+    max-width: 1000px;
+    margin: 0 auto 70px;
+    overflow-wrap: break-word;
+  
+    & [data-prefix] {
+        &::before {
+            color: var(--primary-color);
+            content: attr(data-prefix);
+        }
+    }
+  
+    ol {
+        margin: 0;
+        padding: 0 0 0 24px;
+    }
+  
+    > .markdown-toc {
+        position: absolute;
+        top: 116px;
+        right: 0;
+        z-index: 9;
+        max-width: 200px;
+        height: fit-content;
+        max-height: 75%;
+        margin: auto;
+        padding: 16px 12px 16px 24px;
+        overflow-y: auto;
+        background-color: var(--toc-bg, rgba(255, 255, 255, 0.8));
+        backdrop-filter: blur(16px);
+        border-left: 10px solid var(--primary-color-deprecated-border, #91d5ff);
+        border-radius: var(--border-radius-base, 4px);
+        box-shadow: -10px 0 10px -5px var(--text-shadow-color, rgba(0, 0, 0, 0.1));
+        transform: translateX(0) translateZ(0);
+        transition-duration: @transition-duration;
+        transition-timing-function: @transition-timing-function;
+        transition-property: border-color, background-color, box-shadow, transform;
+  
+        li {
+            list-style: circle;
+  
+            a {
+                max-width: 100%;
+                font-size: 12px;
+                text-decoration: none;
+                transition-duration: @transition-duration;
+                transition-timing-function: @transition-timing-function;
+                transition-property: color;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                display: block;
+                float: left;
+            }
+        }
+  
+        ol {
+            padding: 0 0 0 28px;
+  
+            li {
+                list-style: cjk-ideographic;
+            }
+  
+            ol {
+                padding: 0 0 0 14px;
+  
+                li {
+                    list-style: decimal;
+                }
+  
+                ol {
+                    li {
+                        list-style: circle;
+                    }
+                }
+            }
+        }
+
+        .active {
+            list-style: outside;
+            color: var(--primary-color, rgba(0, 0, 0, 0.65));
+
+            a {
+                color: var(--primary-color, rgba(0, 0, 0, 0.65));
+            }
+        }
+    }
+  
+    p > code,
+    h1 > code,
+    h2 > code,
+    h3 > code,
+    h4 > code,
+    h5 > code,
+    h6 > code,
+    li > code,
+    mark {
+        padding: 2px 4px;
+        color: var(--md-mark-color, #e9887c);
+        font-size: 90%;
+        background-color: var(--mark-bg, #f9f2f4);
+        border-radius: var(--border-radius-base, 4px);
+        transition-duration: @transition-duration;
+        transition-timing-function: @transition-timing-function;
+        transition-property: background-color, color;
+    }
+  
+    a {
+        position: relative;
+        color: var(--text-color, rgba(0, 0, 0, 0.65));
+        text-decoration: none;
+  
+        &::after {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 2px;
+            background-color: var(--primary-color-hover);
+            transform: scaleX(0);
+            transform-origin: center;
+            transition-duration: @transition-duration;
+            transition-timing-function: @transition-timing-function;
+            transition-property: transform, background-color;
+            content: '';
+        }
+  
+        &:visited {
+            color: var(--text-color-secondary, rgba(0, 0, 0, 0.45));
+        }
+  
+        &:hover {
+            color: var(--primary-color-hover);
+  
+            &::after {
+                transform: scaleX(1);
+            }
+        }
+    }
+  
+    h1,
+    h2,
+    h3,
+    h4,
+    h5 {
+        margin-top: 1em;
+        margin-bottom: 1em;
+        color: var(--heading-color);
+        font-weight: 500;
+        transition-duration: @transition-duration;
+        transition-timing-function: @transition-timing-function;
+        transition-property: border-color, background-color, box-shadow, color;
+    }
+  
+    p,
+    dl {
+        margin-bottom: 1em;
+        padding: 0;
+    }
+  
+    h1 {
+        font-size: 1.6em;
+        line-height: 54px;
+    }
+  
+    h2 {
+        font-size: 1.5em;
+        line-height: 42px;
+        counter-increment: section;
+  
+        &::before {
+            content: counter(section) '. ';
+        }
+    }
+  
+    h1,
+    h2 {
+        padding-bottom: 10px;
+        border-bottom: 1px dotted var(--border-color-base);
+    }
+  
+    h3 {
+        font-size: 1.4em;
+        line-height: 30px;
+    }
+  
+    h4 {
+        font-size: 1.3em;
+        line-height: 28px;
+    }
+  
+    h5 {
+        font-size: 1.2em;
+        list-style: none;
+    }
+  
+    hr {
+        height: 2px;
+        margin: 16px 0;
+        padding: 0;
+        color: var(--text-color);
+        text-align: left;
+        background-color: var(--border-color-base);
+        border: 0 none;
+    }
+  
+    p,
+    ul,
+    ol {
+        font-size: var(--font-size-base, 14px);
+    }
+  
+    dl {
+        padding: 0;
+  
+        dt {
+            margin-top: 16px;
+            padding: 10px 0;
+            font-weight: bold;
+            font-size: 1em;
+            font-style: italic;
+        }
+  
+        dd {
+            margin-bottom: 16px;
+            margin-left: 0;
+            padding: 0 16px;
+        }
+    }
+  
+    table {
+        width: stretch;
+        max-width: 100%;
+        overflow: hidden;
+        border-bottom: 1px solid var(--border-color-base);
+        border-radius: 5px;
+        border-spacing: 0;
+        transition-property: border-color;
+  
+        tbody {
+            tr:hover {
+                background-color: var(--table-row-hover-bg, rgba(60,90,100,.04));
+            }
+        }
+  
+        tr {
+            th {
+                padding: 10px;
+                color: var(--heading-color);
+                background-color: var(--table-header-bg, rgba(0,0,0,.02));
+                transition-property: background-color, color;
+            }
+
+            td {
+                padding: 10px;
+                border-color: var(--border-color-base);
+                border-style: dotted;
+                border-width: 0 0 1px 1px;
+                transition-property: border-color;
+  
+                &:first-child {
+                    border-left: 1px solid var(--border-color-base);
+                }
+  
+                &:last-child {
+                    border-right: 1px solid var(--border-color-base);
+                }
+            }
+
+  
+            &:last-child {
+                td {
+                    border-bottom: none;
+                }
+            }
+        }
+    }
+  
+    table, tr th, tr td, blockquote, blockquote::after, blockquote::before, blockquote p {
+        transition-duration: @transition-duration;
+        transition-timing-function: @transition-timing-function;
+    }
+
+    blockquote {
+        position: relative;
+        margin: 30px 60px;
+        padding: 16px;
+        font-weight: 500;
+        background-color: var(--blockquote-bg, #ecf8ff);
+        border-radius: 8px;
+        transition-property: background-color;
+  
+        &::before,
+        &::after {
+            position: absolute;
+            color: var(--blockquote-icon-color, #fb5);
+            font-size: 48px;
+            font-family: 'neko__icon', sans-serif;
+            transition-property: color;
+        }
+  
+        &::before {
+            top: -8px;
+            left: 0;
+            transform: translateX(-53px);
+            content: '\e68e';
+        }
+  
+        &::after {
+            right: 0;
+            bottom: -8px;
+            transform: translateX(53px);
+            content: '\e68d';
+        }
+  
+        cite {
+            color: var(--cite-color, #bfbfbf);
+            font-size: var(--font-size-base, 14px);
+            line-height: 20px;
+  
+            &::before {
+                content: '\2014 \00A0';
+            }
+        }
+  
+        p {
+            margin: auto 0;
+            color: var(--blockquote-color, #5e6d82);
+            font-size: var(--font-size-base, 14px);
+            line-height: 24px;
+            transition-property: color;
+        }
+    }
+  
+    p {
+        line-height: 1.8;
+        vertical-align: baseline;
+        word-wrap: break-word;
+        word-break: break-word;
+  
+        img {
+            position: relative;
+            display: block;
+            max-width: 100%;
+            margin: auto;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+    }
+  
+    details {
+        padding: 20px;
+        overflow: hidden;
+        background: var(--details-bg, #fafaff);
+        border-left: 5px solid var(--details-border-color, #b4b3ff);
+        border-radius: var(--border-radius-base, 4px);
+        user-select: none;
+  
+        &:not(:last-of-type) {
+            margin-bottom: 15px;
+        }
+  
+        summary,
+        summary ~ * {
+            color: var(--details-summary-color, #0e1c4e);
+            font-weight: normal;
+            font-size: 14px;
+            font-style: normal;
+            line-height: 1.4;
+  
+            &:not(:last-of-type) {
+                margin-bottom: 10px;
+            }
+        }
+  
+        summary ~ * {
+            padding-left: 30px;
+        }
+  
+        summary {
+            margin-bottom: 0;
+            list-style-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+            outline: none;
+            cursor: pointer;
+  
+            &::-webkit-details-marker {
+                width: 16px;
+                height: 16px;
+                margin-right: 18px;
+                color: transparent;
+                background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22.6066 12H1.3934' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 1.39343V22.6066' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+                background-size: 100% 100%;
+                transform: translateY(2px);
+            }
+        }
+  
+        &[open] {
+            user-select: auto;
+  
+            summary {
+                margin-bottom: 10px;
+                font-weight: 700;
+                list-style-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+  
+                &::-webkit-details-marker {
+                    width: 12px;
+                    height: 12px;
+                    margin-right: 20px;
+                    color: transparent;
+                    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.5 16.5L1.5 1.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 1.5L1.5 16.5' stroke='%23202842' stroke-width='1.875' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+                    background-size: 100% 100%;
+                    transform: translateY(1px);
+                }
+            }
+  
+            summary ~ * {
+                padding-left: 32px;
+            }
+        }
+    }
+}
+
+@media (max-width: 1450px) {
+    .markdown-box {
+        margin: 0 auto;
+
+        > .markdown-toc {
+            transform: translateX(calc(100% - 10px)) translateZ(0);
+
+            &:hover {
+                transform: translateX(0) translateZ(0);
+            }
+        }
+    }
+}
+@media (max-width: 1110px) {
+    .markdown-box {
+        margin: 0 55px;
+    }
+}
+@media (max-width: 880px) {
+    .markdown-box {
+        margin: 0 55px;
+    }
+}
+@media (max-width: 700px) {
+    .markdown-box {
+        margin: 0 55px;
+    }
+}
+@media (max-width: 580px) {
+    .markdown-box {
+        margin: 0 20px;
+    }
+}