@cn-ui/core/dist/lib/typography/style/index.css

The @cn-ui/core is a collection of UI components and utilities for building modern web applications with SolidJS.

.cn-typography ::-webkit-scrollbar {
    height:0.5rem;width:0.5rem;
}

.cn-typography ::-webkit-scrollbar-thumb {
    --at-apply: bg-design-border;
}

.cn-typography ::-webkit-scrollbar-track-piece {
    background-color:transparent;;
}

.cn-typography {
    font-family: var(--default-font);
    box-sizing:border-box;width:100%;padding-bottom:3rem;;
    /* 默认不显示下划线，保持页面简洁 */
}
.cn-typography ins,
.cn-typography a {
    text-decoration-line:underline;text-underline-offset:2px;;
}

/* 专名号：虽然 u 已经重回 html5 Draft，但在所有浏览器中都是可以使用的，
*/
.cn-typography u {
    text-decoration-line:underline;text-underline-offset:2px;;
}

/* 标记，类似于手写的荧光笔的作用 */
.cn-typography mark {
    margin-left:1rem;margin-right:1rem;--un-bg-opacity:1;background-color:rgb(var(--cn-colors-yellow-200) / var(--un-bg-opacity));padding-left:0.125rem;padding-right:0.125rem;;
}

/* 代码片断 */
.cn-typography pre,
.cn-typography pre tt {
    font-family: Courier, "Courier New", monospace;
}

.cn-typography pre {
    overflow:auto;border-radius:1rem;padding-left:1rem;padding-right:1rem;;
}
/* 保证块/段落之间的空白隔行 */
.cn-typography p,
.cn-typography pre,
.cn-typography ul,
.cn-typography ol,
.cn-typography dl,
.cn-typography form,
.cn-typography table,
.cn-typography blockquote {
    /* 因为文章上面可能有 header 所以不适合加上边框 */
    margin-bottom:1rem;;
}

/* 两边对齐会导致 部分文本间隔过大 */
/* .cn-typography p {
    --at-apply: text-justify;
} */

.cn-typography hr {
    margin-top:0.5rem;margin-bottom:0.5rem;;
}
.cn-typography blockquote {
    position:relative;margin-top:0.5rem;margin-bottom:0.5rem;border-left-width:4px;border-style:solid;padding-left:0.5rem;font-weight:400;;
}
.cn-typography :not(pre) > code {
    margin-left:0.25rem;margin-right:0.25rem;margin-top:0.5rem;margin-bottom:0.5rem;border-radius:0.375rem;padding-left:0.25rem;padding-right:0.25rem;;
}

/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
.cn-typography h1,
.cn-typography h2,
.cn-typography h3,
.cn-typography h4,
.cn-typography h5,
.cn-typography h6 {
    margin-bottom:0.6em;margin-top:0.75em;padding-bottom:1rem;line-height:1.375;
}
.cn-typography h1,
.cn-typography h2,
.cn-typography h3,
.cn-typography h4 {
    font-weight:700;;
}
.cn-typography h1 {
    font-size:1.875rem;line-height:2.25rem;;
}
.cn-typography h2 {
    border-bottom-width:1px;font-size:1.5rem;line-height:2rem;;
}

.cn-typography h3 {
    margin-top:1.5em;padding-bottom:0.5rem;font-size:1.25rem;line-height:1.75rem;;
}

.cn-typography h4 {
    font-size:1.125rem;line-height:1.75rem;;
}

.cn-typography h5 {
    font-size:0.875rem;line-height:1.25rem;;
}

.cn-typography h6 {
    font-size:0.75rem;line-height:1rem;;
}
.cn-typography ul {
    /*  ul 和 ol 在默认表现下会有一定的左距离，所以需要 6 来保证序列标记在第一个字 */
    margin-left:1.5rem;list-style-type:disc;;
}

.cn-typography ol {
    margin-left:1.5rem;list-style-type:decimal;;
}

.cn-typography li ul,
.cn-typography li ol {
    margin-left:2rem;margin-bottom:0.75rem;;
}

.cn-typography li ul {
    list-style: circle;
    --at-apply: list-[circle];
}

.cn-typography table {
    width:100%;overflow:auto;;
}

/* 同 ul/ol，在文章中应用 table 基本格式 */
.cn-typography table th,
.cn-typography table td,
.cn-typography table caption {
    border-width:1px;padding-left:0.5rem;padding-right:0.5rem;padding-top:1rem;padding-bottom:1rem;;
}

.cn-typography table caption {
    border-bottom-width:0px;;
}

/* 去除 webkit 中 input 和 textarea 的默认样式  */
.cn-typography input,
.cn-typography textarea {
    -webkit-appearance:none;appearance:none;border-radius:0;;
}

.cn-typography em,
.cn-typography legend,
.cn-typography caption {
    font-weight: inherit;
}

/* 不使用着重号，*/
.cn-typography em {
    position:relative;margin-left:0.25rem;margin-right:0.25rem;;
}

.cn-typography abbr {
    cursor:pointer;text-underline-offset:4px;;
}
/* Responsive images */
.cn-typography img {
    max-width: 100%;
}
.cn-typography > p {
    white-space:pre-wrap;;
}
.cn-typography.cn-indent p:not(.indent-none) {
    text-indent:2em;;
}
.cn-typography a {
    --un-text-opacity:1;color:rgb(var(--cn-colors-primary-500) / var(--un-text-opacity));--un-text-opacity:1;color:rgb(var(--cn-colors-primary-400) / var(--un-text-opacity));;
}
.cn-typography strong {
    margin-left:0.25rem;margin-right:0.25rem;
}
.cn-typography summary {
    cursor:pointer;-webkit-user-select:none;user-select:none;
}
.cn-typography figcaption {
    margin-top:0.5rem;border-top-width:1px;padding-top:0.5rem;;
}

.cn-typography section {
    margin-top:1rem;margin-bottom:1rem;;
}