vexip-ui/css/typography.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-text-vars{--vxp-text-font-family-mono:var(--vxp-font-family-mono);--vxp-text-font-weight-strong:600;--vxp-text-font-weight-thin:300;--vxp-text-color:var(--vxp-content-color-base);--vxp-text-color-disabled:var(--vxp-content-color-disabled);--vxp-text-color-marked:var(--vxp-content-color-base);--vxp-text-color-reversed:var(--vxp-bg-color-base);--vxp-text-mark-color:var(--vxp-fill-color-hover);--vxp-text-code-bg-color:var(--vxp-fill-color-humble);--vxp-text-code-radius:var(--vxp-radius-small);--vxp-text-keyboard-bg-color:var(--vxp-fill-color-background);--vxp-text-keyboard-b-color:var(--vxp-border-color-light-1);--vxp-text-keyboard-radius:var(--vxp-radius-base)}.vxp-text{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);color:var(--vxp-text-color);transition:var(--vxp-transition-color),var(--vxp-transition-background)}.vxp-text,.vxp-text *,.vxp-text ::after,.vxp-text ::before{box-sizing:border-box}.vxp-text--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-text--primary{--vxp-text-color:var(--vxp-color-primary-base);--vxp-text-mark-color:var(--vxp-color-primary-opacity-1)}.vxp-text--info{--vxp-text-color:var(--vxp-color-info-base);--vxp-text-mark-color:var(--vxp-color-info-opacity-1)}.vxp-text--success{--vxp-text-color:var(--vxp-color-success-base);--vxp-text-mark-color:var(--vxp-color-success-opacity-1)}.vxp-text--warning{--vxp-text-color:var(--vxp-color-warning-base);--vxp-text-mark-color:var(--vxp-color-warning-opacity-1)}.vxp-text--error{--vxp-text-color:var(--vxp-color-error-base);--vxp-text-mark-color:var(--vxp-color-error-opacity-1)}.vxp-text--strong{font-weight:var(--vxp-text-font-weight-strong)}.vxp-text--italic{font-style:italic}.vxp-text--underline{text-decoration:underline}.vxp-text--mark{padding:0 1px;color:var(--vxp-text-color-marked);background-color:var(--vxp-text-mark-color)}.vxp-text--reversed{color:var(--vxp-text-color-reversed)}.vxp-text--disabled{color:var(--vxp-text-color-disabled)}.vxp-text--thin{font-weight:var(--vxp-text-font-weight-thin)}.vxp-text--code{padding:3px 5px 2px;font-family:var(--vxp-text-font-family-mono);background-color:var(--vxp-text-code-bg-color);border-radius:var(--vxp-text-code-radius)}.vxp-text--keyboard{display:inline-flex;align-items:center;padding:4px 5px;font-family:var(--vxp-text-font-family-mono);line-height:1;background-color:var(--vxp-text-keyboard-bg-color);border:var(--vxp-border-shape) var(--vxp-text-keyboard-b-color);border-radius:var(--vxp-text-keyboard-radius)}.vxp-title-vars{--vxp-title-font-size-level-1:36px;--vxp-title-font-size-level-2:30px;--vxp-title-font-size-level-3:24px;--vxp-title-font-size-level-4:20px;--vxp-title-font-size-level-5:var(--vxp-font-size-primary);--vxp-title-font-size-level-6:var(--vxp-font-size-base);--vxp-title-font-weight:600;--vxp-title-font-weight-thin:300;--vxp-title-color:var(--vxp-content-color-primary);--vxp-title-marker-width:4px;--vxp-title-marker-color:var(--vxp-content-color-placeholder);--vxp-title-marker-offset:16px}.vxp-title{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);margin-top:1em;margin-bottom:.5em;font-weight:var(--vxp-title-font-weight);color:var(--vxp-title-color);transition:var(--vxp-transition-color)}.vxp-title,.vxp-title *,.vxp-title ::after,.vxp-title ::before{box-sizing:border-box}.vxp-title--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-title--primary{--vxp-title-color:var(--vxp-color-primary-base)}.vxp-title--marker-primary{--vxp-title-marker-color:var(--vxp-color-primary-base)}.vxp-title--info{--vxp-title-color:var(--vxp-color-info-base)}.vxp-title--marker-info{--vxp-title-marker-color:var(--vxp-color-info-base)}.vxp-title--success{--vxp-title-color:var(--vxp-color-success-base)}.vxp-title--marker-success{--vxp-title-marker-color:var(--vxp-color-success-base)}.vxp-title--warning{--vxp-title-color:var(--vxp-color-warning-base)}.vxp-title--marker-warning{--vxp-title-marker-color:var(--vxp-color-warning-base)}.vxp-title--error{--vxp-title-color:var(--vxp-color-error-base)}.vxp-title--marker-error{--vxp-title-marker-color:var(--vxp-color-error-base)}.vxp-title--top{margin-top:0}.vxp-title--thin{font-weight:var(--vxp-title-font-weight-thin)}h1.vxp-title{font-size:var(--vxp-title-font-size-level-1)}h2.vxp-title{font-size:var(--vxp-title-font-size-level-2)}h3.vxp-title{font-size:var(--vxp-title-font-size-level-3)}h4.vxp-title{font-size:var(--vxp-title-font-size-level-4)}h5.vxp-title{font-size:var(--vxp-title-font-size-level-5)}h6.vxp-title{font-size:var(--vxp-title-font-size-level-6)}.vxp-title--marker{position:relative}.vxp-title--marker::before{position:absolute;inset-inline-start:calc(var(--vxp-title-marker-offset) * -1);top:0;bottom:0;width:var(--vxp-title-marker-width);content:"";background-color:var(--vxp-title-marker-color);transition:var(--vxp-transition-background)}.vxp-title--marker.vxp-title--aligned{padding-inline-start:var(--vxp-title-marker-offset)}.vxp-title--marker.vxp-title--aligned::before{inset-inline-start:0}.vxp-blockquote-vars{--vxp-blockquote-color:var(--vxp-content-color-base);--vxp-blockquote-padding-inline-start:10px;--vxp-blockquote-marker-width:4px;--vxp-blockquote-marker-color:var(--vxp-border-color-base)}.vxp-blockquote{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);padding-inline-start:var(--vxp-blockquote-padding-inline-start);margin:1em 0;color:var(--vxp-blockquote-color);border-inline-start:var(--vxp-blockquote-marker-width) solid var(--vxp-blockquote-marker-color);transition:var(--vxp-transition-color)}.vxp-blockquote,.vxp-blockquote *,.vxp-blockquote ::after,.vxp-blockquote ::before{box-sizing:border-box}.vxp-blockquote--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-blockquote--primary{--vxp-blockquote-color:var(--vxp-color-primary-base);--vxp-blockquote-marker-color:var(--vxp-color-primary-opacity-3)}.vxp-blockquote--info{--vxp-blockquote-color:var(--vxp-color-info-base);--vxp-blockquote-marker-color:var(--vxp-color-info-opacity-3)}.vxp-blockquote--success{--vxp-blockquote-color:var(--vxp-color-success-base);--vxp-blockquote-marker-color:var(--vxp-color-success-opacity-3)}.vxp-blockquote--warning{--vxp-blockquote-color:var(--vxp-color-warning-base);--vxp-blockquote-marker-color:var(--vxp-color-warning-opacity-3)}.vxp-blockquote--error{--vxp-blockquote-color:var(--vxp-color-error-base);--vxp-blockquote-marker-color:var(--vxp-color-error-opacity-3)}.vxp-ol,.vxp-ul{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);padding:0}.vxp-ol,.vxp-ol *,.vxp-ol ::after,.vxp-ol ::before,.vxp-ul,.vxp-ul *,.vxp-ul ::after,.vxp-ul ::before{box-sizing:border-box}.vxp-ol--inherit,.vxp-ul--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-ol>li,.vxp-ul>li{padding-inline-start:4px;margin-inline-start:20px}.vxp-ul--no-marker>li{margin-inline-start:0}