vanilla-jui 1.3.8 → 1.3.10

package/src/css/components.css

@@ -0,0 +1,26 @@
+@import url('./divider.css');
+@import url('./button.css');
+@import url('./avatar.css');
+@import url('./badge.css');
+@import url('./tag.css');
+@import url('./tip.css');
+@import url('./loading.css');
+@import url('./skeleton.css');
+@import url('./popup.css');
+@import url('./modal.css');
+@import url('./flow.css');
+@import url('./toast.css');
+@import url('./tabs.css');
+@import url('./offcanvas.css');
+@import url('./accordion.css');
+@import url('./theme-palette.css');
+@import url('./drop.css');
+@import url('./tooltip.css');
+@import url('./swiper.css');
+@import url('./breadcrumb.css');
+@import url('./table.css');
+@import url('./pagination.css');
+@import url('./card.css');
+@import url('./toolbar.css');
+@import url('./menu.css');
+@import url('./toc.css');

package/src/css/content.css

@@ -0,0 +1,716 @@
+@layer content {
+  /* ============================================
+     Content - 文章阅读/编辑器预览样式
+     ============================================ */
+
+  .j-content {
+    /* 阅读模式变量 */
+    --content-line-height: 1.75;
+    --content-letter-spacing: 0.01em;
+    --content-word-spacing: 0.02em;
+    --content-paragraph-spacing: 1.25em;
+    --content-heading-spacing: 1.5em;
+    --content-block-spacing: 1.5em;
+    --content-list-spacing: 0.5em;
+
+    line-height: var(--content-line-height);
+    letter-spacing: var(--content-letter-spacing);
+    word-spacing: var(--content-word-spacing);
+    word-break: break-word;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    outline: 0;
+    position: relative;
+  }
+
+  /* --- Size Modes --- */
+  .j-content,
+  .j-content.is-md {
+    font-size: var(--font-size-lg);
+  }
+
+  .j-content.is-sm {
+    --content-line-height: 1.65;
+    --content-paragraph-spacing: 1em;
+    --content-heading-spacing: 1.25em;
+    --content-block-spacing: 1.25em;
+    font-size: var(--font-size-md);
+  }
+
+  .j-content.is-lg {
+    --content-line-height: 1.8;
+    --content-paragraph-spacing: 1.5em;
+    --content-heading-spacing: 1.75em;
+    --content-block-spacing: 1.75em;
+    font-size: var(--font-size-xl);
+  }
+
+  .j-content.is-xl {
+    --content-line-height: 1.85;
+    --content-paragraph-spacing: 1.75em;
+    --content-heading-spacing: 2em;
+    --content-block-spacing: 2em;
+    font-size: var(--font-size-2xl);
+  }
+
+  /* ============================================
+     Typography - 段落与标题
+     ============================================ */
+
+  /* Reset */
+  .j-content *,
+  .j-content *::before,
+  .j-content *::after {
+    box-sizing: border-box;
+  }
+
+  /* 段落 */
+  .j-content p {
+    margin: 0 0 var(--content-paragraph-spacing);
+  }
+
+  /* 标题层级 */
+  .j-content h1,
+  .j-content h2,
+  .j-content h3,
+  .j-content h4,
+  .j-content h5,
+  .j-content h6 {
+    margin: var(--content-heading-spacing) 0 calc(var(--content-heading-spacing) * 0.75);
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--tone-heading);
+    letter-spacing: -0.02em;
+  }
+
+  .j-content h1 {
+    font-size: 2em;
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    margin-top: 0;
+  }
+
+  .j-content h2 {
+    font-size: 1.625em;
+    font-weight: 650;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid var(--ui-border-subtle);
+  }
+
+  .j-content h3 {
+    font-size: 1.375em;
+  }
+
+  .j-content h4 {
+    font-size: 1.125em;
+  }
+
+  .j-content h5,
+  .j-content h6 {
+    font-size: 1em;
+  }
+
+  /* 标题后的段落减少间距 */
+  .j-content h1+p,
+  .j-content h2+p,
+  .j-content h3+p,
+  .j-content h4+p,
+  .j-content h5+p,
+  .j-content h6+p {
+    margin-top: calc(var(--content-paragraph-spacing) * -0.5);
+  }
+
+  /* ============================================
+     Inline Elements - 内联元素
+     ============================================ */
+
+  .j-content strong,
+  .j-content b {
+    font-weight: 650;
+    color: var(--tone-heading);
+  }
+
+  .j-content em,
+  .j-content i {
+    font-style: italic;
+  }
+
+  .j-content u {
+    text-decoration: underline;
+    text-decoration-thickness: 4px;
+    text-decoration-color: var(--tone-ring);
+    text-underline-offset: 0.2em;
+  }
+
+  .j-content s,
+  .j-content del {
+    text-decoration: line-through;
+    color: var(--tone-caption);
+  }
+
+  .j-content mark {
+    background-color: var(--tone-highlight);
+    color: var(--tone-highlight-fg);
+    padding: 0.1em 0.3em;
+    border-radius: 0.2em;
+  }
+
+  .j-content small {
+    font-size: 0.875em;
+    color: var(--tone-caption);
+  }
+
+  .j-content sub {
+    vertical-align: sub;
+    font-size: 0.75em;
+  }
+
+  .j-content sup {
+    vertical-align: super;
+    font-size: 0.75em;
+  }
+
+  .j-content abbr[title] {
+    text-decoration: underline dotted;
+    text-decoration-color: var(--tone-muted);
+    text-underline-offset: 0.2em;
+    cursor: help;
+  }
+
+  .j-content time {
+    white-space: nowrap;
+    color: var(--tone-caption);
+  }
+
+  .j-content ruby {
+    font-size: 0.95em;
+  }
+
+  .j-content rt {
+    font-size: 0.7em;
+    color: var(--tone-caption);
+  }
+
+  /* ============================================
+     Links - 链接
+     ============================================ */
+
+  .j-content a {
+    color: var(--tone-link);
+    text-decoration: none;
+    text-decoration-color: transparent;
+    text-underline-offset: 0.15em;
+    transition: color 0.15s, text-decoration-color 0.15s;
+  }
+
+  .j-content a:hover {
+    color: var(--tone-link-hover);
+    text-decoration: underline;
+    text-decoration-color: var(--tone-link-hover);
+  }
+
+  .j-content a:visited {
+    color: var(--tone-link-visited);
+  }
+
+  .j-content a:active {
+    color: var(--tone-link-active);
+  }
+
+  /* ============================================
+     Lists - 列表
+     ============================================ */
+
+  .j-content ul,
+  .j-content ol {
+    margin: 0 0 var(--content-paragraph-spacing);
+    padding-left: 1.75em;
+    /* font-size: 0.875em; */
+  }
+
+  .j-content ul li,
+  .j-content ol li {
+    margin-bottom: var(--content-list-spacing);
+    padding-left: 0.25em;
+  }
+
+  .j-content ul li:last-child,
+  .j-content ol li:last-child {
+    margin-bottom: 0;
+  }
+
+  .j-content ul {
+    list-style-type: disc;
+  }
+
+  .j-content ol {
+    list-style-type: decimal;
+  }
+
+  .j-content ul ul {
+    list-style-type: circle;
+    margin-top: var(--content-list-spacing);
+    margin-bottom: 0;
+  }
+
+  .j-content ol ol {
+    list-style-type: lower-alpha;
+    margin-top: var(--content-list-spacing);
+    margin-bottom: 0;
+  }
+
+  .j-content ul ul ul {
+    list-style-type: square;
+  }
+
+  .j-content ul p,
+  .j-content ol p {
+    margin: 0;
+  }
+
+  /* Definition List */
+  .j-content dl {
+    margin: 0 0 var(--content-block-spacing);
+  }
+
+  .j-content dt {
+    font-weight: 600;
+    margin-top: 0.75em;
+    margin-bottom: 0.125em;
+    color: var(--tone-heading);
+  }
+
+  .j-content dt:first-child {
+    margin-top: 0;
+  }
+
+  .j-content dd {
+    margin: 0 0 0.75em;
+    padding-left: 1em;
+    color: var(--tone-body);
+  }
+
+  .j-content dd+dt {
+    margin-top: 1em;
+  }
+
+  /* checkbox - 任务列表 */
+  .j-content .j-checkbox {
+    margin-block: var(--content-paragraph-spacing);
+  }
+
+  /* ============================================
+     Blockquote - 引用
+     ============================================ */
+
+  .j-content blockquote {
+    margin: var(--content-block-spacing) 0;
+    margin-left: 0;
+    margin-right: 0;
+    padding: 1em 1.5em;
+    border-left: 3px solid var(--tone-border);
+    border-radius: 0 var(--radius-md) var(--radius-md) 0;
+    background-color: var(--tone-wash);
+    color: var(--tone-subtitle);
+    font-style: italic;
+  }
+
+  .j-content blockquote p {
+    margin: 0;
+  }
+
+  .j-content blockquote p+p {
+    margin-top: 0.75em;
+  }
+
+  .j-content cite {
+    display: block;
+    margin-top: 0.75em;
+    font-style: normal;
+    font-size: 0.875em;
+    color: var(--tone-caption);
+  }
+
+  .j-content cite::before {
+    content: '— ';
+  }
+
+  /* ============================================
+     Code - 代码
+     ============================================ */
+
+  .j-content code:not([class*="language-"]) {
+    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+    font-size: 0.875em;
+    border: 1px solid var(--ui-border-subtle);
+    border-radius: var(--radius-sm);
+    word-break: break-word;
+    padding: 0.15em 0.4em;
+    background-color: var(--tone-code-bg);
+    color: var(--tone-code-fg);
+  }
+
+  .j-content kbd {
+    font-family: inherit;
+    font-size: 0.875em;
+    background-color: var(--ui-surface-subtle);
+    border: 1px solid var(--ui-border);
+    border-bottom-width: 2px;
+    border-radius: var(--radius-sm);
+    padding: 0.1em 0.4em;
+    color: var(--tone-body);
+  }
+
+  .j-content pre {
+    margin: var(--content-block-spacing) 0;
+    background-color: var(--tone-code-bg);
+    font-size: 0.875em;
+    line-height: 1.6;
+    tab-size: 2;
+  }
+
+  .j-content pre code {
+    background: none;
+    color: inherit;
+    font-size: inherit;
+    white-space: pre;
+  }
+
+  .j-content pre.j-code-editor {
+    position: relative;
+    margin-block: 1rem;
+    overflow: auto;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--ui-border);
+  }
+
+  html.j-radius-round .j-content pre.j-code-editor {
+    border-radius: 1.25rem;
+  }
+
+  .j-content pre.j-code-editor.hljs {
+    color: var(--ui-fg);
+    background-color: var(--ui-bg-subtle);
+    white-space: break-spaces;
+  }
+
+  .j-content pre.j-code-editor select.language-selector {
+    --input-background-color: var(--ui-bg-subtle);
+    --input-box-shadow: none;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    z-index: 1;
+  }
+
+  .j-content pre code[class*="language-"] {
+    display: block;
+    overflow-x: auto;
+    padding: 1.25em 1.5em;
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: var(--ui-tomato)
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: var(--ui-violet)
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: var(--ui-teal)
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: var(--ui-pink)
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: var(--ui-orange)
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: var(--ui-olive)
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: var(--ui-indigo);
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: var(--ui-fg)
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: var(--ui-teal);
+    font-weight: bold
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: var(--ui-gold)
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: var(--ui-fg);
+    font-style: italic
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: var(--ui-fg);
+    font-weight: bold
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: var(--ui-indigo);
+    background-color: #f0fff4
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: var(--ui-ruby);
+    background-color: #ffeef0;
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+  }
+
+  /* ============================================
+     Media - 媒体
+     ============================================ */
+
+  .j-content img {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-lg);
+  }
+
+  .j-content figure {
+    margin: var(--content-block-spacing) 0;
+  }
+
+  .j-content figure img,
+  .j-content figure video,
+  .j-content figure iframe {
+    display: block;
+    margin: 0 auto;
+  }
+
+  .j-content figcaption {
+    margin-top: 0.75em;
+    font-size: 0.875em;
+    color: var(--tone-caption);
+    text-align: center;
+    line-height: 1.5;
+  }
+
+  .j-content iframe,
+  .j-content video,
+  .j-content audio {
+    max-width: 100%;
+  }
+
+  .j-content video,
+  .j-content audio {
+    display: block;
+    border-radius: var(--radius-lg);
+  }
+
+  .j-content video {
+    background-color: var(--ui-fg);
+  }
+
+  .j-content figure:has(audio) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  /* ============================================
+     Table - 表格
+     ============================================ */
+
+  .j-content table {
+    min-width: 280px;
+    max-width: 100%;
+    margin: var(--content-block-spacing) 0;
+    border-collapse: collapse;
+    font-size: 0.9375em;
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .j-content th,
+  .j-content td {
+    padding: 0.75em 1em;
+    border-bottom: 1px solid var(--ui-border-subtle);
+    text-align: left;
+  }
+
+  .j-content th {
+    background-color: var(--ui-bg-subtle);
+    font-weight: 600;
+    color: var(--tone-heading);
+    white-space: nowrap;
+  }
+
+  .j-content thead th {
+    border-bottom: 2px solid var(--ui-border);
+  }
+
+  .j-content tbody tr:hover {
+    background-color: var(--ui-surface-hover);
+  }
+
+  .j-content tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  /* ============================================
+     Horizontal Rule - 分割线
+     ============================================ */
+
+  .j-content hr {
+    margin: var(--content-block-spacing) 0;
+    border: 0;
+    height: 1px;
+    background-color: var(--ui-border);
+  }
+
+  /* ============================================
+     Details / Summary - 折叠
+     ============================================ */
+
+  .j-content details {
+    margin: var(--content-block-spacing) 0;
+    padding: 1em 1.25em;
+    background-color: var(--ui-bg-subtle);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--ui-border-subtle);
+  }
+
+  .j-content summary {
+    cursor: pointer;
+    font-weight: 600;
+    color: var(--tone-heading);
+    outline: none;
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+  }
+
+  .j-content summary::before {
+    content: '▸';
+    display: inline-block;
+    transition: transform 0.2s ease;
+  }
+
+  .j-content details[open]>summary::before {
+    transform: rotate(90deg);
+  }
+
+  .j-content details[open]>summary {
+    margin-bottom: 0.75em;
+  }
+
+  .j-content details[open]>summary+* {
+    margin-top: 0;
+  }
+
+  /* ============================================
+     Progress / Meter
+     ============================================ */
+
+  .j-content progress {
+    max-width: 100%;
+    height: 0.5em;
+    margin: 0.5em 0;
+    border-radius: var(--radius-full);
+    overflow: hidden;
+  }
+
+  .j-content meter {
+    max-width: 100%;
+    height: 1em;
+    margin: 0.25em 0;
+  }
+
+  /* ============================================
+     Address
+     ============================================ */
+
+  .j-content address {
+    font-style: normal;
+    margin: 0 0 var(--content-block-spacing);
+    padding: 1em 1.25em;
+    background-color: var(--ui-bg-subtle);
+    border-radius: var(--radius-lg);
+    color: var(--tone-caption);
+    font-size: 0.9375em;
+  }
+
+  /* ============================================
+     Block Item - 通用块级元素
+     ============================================ */
+
+  .j-content .block-item {
+    margin: var(--content-block-spacing) 0;
+  }
+
+  /* First/Last child margin reset */
+  .j-content>*:first-child {
+    margin-top: 0;
+  }
+
+  .j-content>*:last-child {
+    margin-bottom: 0;
+  }
+}