vanilla-jui 1.5.24 → 1.5.26

package/src/css/content.css

@@ -1,692 +0,0 @@
-@layer content {
-  /* ============================================
-    Content - 文章阅读/编辑器预览样式
-  ============================================ */
-  .j-content {
-    font-size: var(--content-font-size);
-    line-height: var(--content-line-height);
-    letter-spacing: var(--content-letter-space);
-    word-spacing: var(--content-word-space);
-    word-break: break-word;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    outline: var(--content-outline);
-    position: relative;
-  }
-
-  /* ============================================
-    Typography - 段落与标题
-  ============================================ */
-  .j-content p {
-    margin: 0 0 var(--content-paragraph-space);
-  }
-
-  .j-content h1,
-  .j-content h2,
-  .j-content h3,
-  .j-content h4,
-  .j-content h5,
-  .j-content h6 {
-    margin: var(--content-heading-space) 0
-      calc(var(--content-heading-space) * 0.75);
-    font-weight: 600;
-    /* line-height: 1.3; */
-    color: var(--content-heading-fg);
-    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.25em;
-    border-bottom: 1px solid var(--content-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-space) * -0.5);
-  }
-
-  /* ============================================
-    Inline Elements - 内联元素
-  ============================================ */
-  .j-content strong,
-  .j-content b {
-    font-weight: 650;
-    color: var(--content-heading-fg);
-  }
-
-  .j-content em,
-  .j-content i {
-    font-style: italic;
-  }
-
-  .j-content u {
-    text-decoration: underline;
-    text-decoration-thickness: 4px;
-    text-decoration-color: var(--content-ring);
-    text-underline-offset: 0.2em;
-  }
-
-  .j-content s,
-  .j-content del {
-    text-decoration: line-through;
-    color: var(--content-caption-fg);
-  }
-
-  .j-content mark {
-    background: 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(--content-caption-fg);
-  }
-
-  .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(--content-caption-fg);
-  }
-
-  .j-content ruby {
-    font-size: 0.95em;
-  }
-
-  .j-content rt {
-    font-size: 0.7em;
-    color: var(--content-caption-fg);
-  }
-
-  /* ============================================
-    Links - 链接
-  ============================================ */
-  .j-content a {
-    color: var(--content-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(--content-link-hover);
-    text-decoration: underline;
-    text-decoration-color: var(--content-link-hover);
-  }
-
-  .j-content a:visited {
-    color: var(--content-link-visited);
-  }
-
-  .j-content a:active {
-    color: var(--content-link-active);
-  }
-
-  /* ============================================
-    Lists - 列表
-  ============================================ */
-  .j-content ul,
-  .j-content ol {
-    margin: 0 0 var(--content-paragraph-space);
-    padding-left: 1.75em;
-  }
-
-  .j-content ul li,
-  .j-content ol li {
-    margin-bottom: var(--content-list-space);
-    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,
-  .j-content ol ol,
-  .j-content ol ul,
-  .j-content ul ol {
-    margin-top: var(--content-list-space);
-    margin-bottom: 0;
-  }
-
-  .j-content ul ul {
-    list-style-type: circle;
-  }
-
-  .j-content ul ul ul {
-    list-style-type: square;
-  }
-
-  .j-content ol ol {
-    list-style-type: lower-alpha;
-  }
-
-  .j-content ol ol ol {
-    list-style-type: lower-roman;
-  }
-
-  .j-content ul p,
-  .j-content ol p {
-    margin: 0;
-  }
-
-  /* Definition List */
-  .j-content dl {
-    margin: 0 0 var(--content-block-space);
-  }
-
-  .j-content dt {
-    font-weight: 600;
-    margin-top: 0.75em;
-    margin-bottom: 0.125em;
-    color: var(--content-heading-fg);
-  }
-
-  .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-space);
-  }
-
-  /* ============================================
-    Blockquote - 引用
-  ============================================ */
-  .j-content blockquote {
-    margin: var(--content-block-space) 0;
-    margin-left: 0;
-    margin-right: 0;
-    padding: 1em 1.5em;
-    border-left: 3px solid var(--content-border-tone);
-    border-radius: 0 var(--radius-md) var(--radius-md) 0;
-    background-color: var(--content-blockquote-bg);
-    color: var(--content-blockquote-fg);
-    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(--content-caption-fg);
-  }
-
-  .j-content cite::before {
-    content: '— ';
-  }
-
-  /* ============================================
-    Code - 代码
-  ============================================ */
-  code {
-    box-decoration-break: clone;
-  }
-
-  .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(--content-border-subtle);
-    border-radius: var(--radius-sm);
-    word-break: break-word;
-    padding: 0.15em 0.4em;
-    background: var(--content-code-bg);
-    color: var(--content-code-fg);
-  }
-
-  .j-content kbd {
-    font-family: inherit;
-    font-size: 0.875em;
-    background: var(--content-code-bg);
-    border: 1px solid var(--content-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-space) 0;
-    background: var(--content-code-bg);
-    font-size: 0.875em;
-    line-height: 1.6;
-    tab-size: 2;
-  }
-
-  .j-content pre code {
-    background: none;
-    color: inherit;
-    font-size: inherit;
-  }
-
-  .j-content pre.j-code-editor {
-    position: relative;
-    margin-block: 1rem;
-    border-radius: var(--radius-md);
-    border: 1px solid var(--content-border-subtle);
-    overflow: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--ui-border) transparent;
-    color: var(--ui-fg);
-    background: var(--content-bg-subtle);
-  }
-
-  .j-radius-round .j-content pre.j-code-editor {
-    border-radius: 1.25rem;
-  }
-
-  .j-code-editor .code-header {
-    display: flex;
-    align-items: center;
-    gap: 40px;
-    padding: 0.5rem 1rem 0;
-    font-size: 12px;
-    color: var(--ui-fg-soft);
-  }
-
-  .j-code-editor .code-header .code-dots {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: var(--state-success);
-    box-shadow:
-      14px 0 0 var(--state-warning),
-      28px 0 0 var(--state-danger);
-  }
-
-  .j-code-editor .code-header .code-language,
-  .j-code-editor .code-header select {
-    font-size: 0.75rem;
-    color: var(--ui-fg-soft);
-  }
-
-  .j-code-editor .code-header select {
-    appearance: none;
-    background: transparent;
-    border: none;
-  }
-
-  .j-code-editor .code-header select::-ms-expand {
-    display: none;
-  }
-
-  .j-content pre code[class*='language-'] {
-    display: block;
-    padding: 1.25em 1.5em;
-  }
-
-  .j-content pre.j-code-editor .code-header + code[class*='language-'] {
-    padding: 0.5rem 1rem 1rem;
-  }
-
-  /* purposely ignored */
-  .hljs-char.escape_,
-  .hljs-link,
-  .hljs-params,
-  .hljs-property,
-  .hljs-punctuation,
-  .hljs-tag {
-    color: var(--ui-gray);
-  }
-
-  /* prettylights-syntax-entity */
-  .hljs-title,
-  .hljs-title.class_,
-  .hljs-title.class_.inherited__,
-  .hljs-title.function_ {
-    color: var(--ui-violet);
-  }
-
-  /* prettylights-syntax-constant */
-  .hljs-attr,
-  .hljs-attribute,
-  .hljs-literal,
-  .hljs-meta,
-  .hljs-number,
-  .hljs-operator,
-  .hljs-variable,
-  .hljs-selector-attr,
-  .hljs-selector-class,
-  .hljs-selector-id {
-    color: var(--ui-teal);
-  }
-
-  /* prettylights-syntax-keyword */
-  .hljs-doctag,
-  .hljs-keyword,
-  .hljs-meta .hljs-keyword,
-  .hljs-template-tag,
-  .hljs-template-variable,
-  .hljs-type,
-  .hljs-variable.language_ {
-    color: var(--ui-tomato);
-  }
-
-  /* prettylights-syntax-string */
-  .hljs-regexp,
-  .hljs-string,
-  .hljs-meta .hljs-string {
-    color: var(--ui-pink);
-  }
-
-  /* prettylights-syntax-variable */
-  .hljs-built_in,
-  .hljs-symbol {
-    color: var(--ui-orange);
-  }
-
-  /* prettylights-syntax-comment */
-  .hljs-comment,
-  .hljs-code,
-  .hljs-formula {
-    color: var(--ui-fg-soft);
-  }
-
-  .language-markdown .hljs-code {
-    color: inherit;
-  }
-
-  /* .dark .hljs-comment,
-  .dark .hljs-code,
-  .dark .hljs-formula {
-    color: var(--ui-gray-shade);
-  } */
-
-  /* prettylights-syntax-entity-tag */
-  .hljs-name,
-  .hljs-quote,
-  .hljs-selector-tag,
-  .hljs-selector-pseudo {
-    color: var(--ui-indigo);
-  }
-
-  /* prettylights-syntax-storage-modifier-import */
-  .hljs-subst {
-    color: var(--ui-fg);
-  }
-
-  /* prettylights-syntax-markup-heading */
-  .hljs-section {
-    color: var(--ui-teal);
-    font-weight: bold;
-  }
-
-  /* prettylights-syntax-markup-list */
-  .hljs-bullet {
-    color: var(--ui-gold);
-  }
-
-  /* prettylights-syntax-markup-italic */
-  .hljs-emphasis {
-    color: var(--ui-fg);
-    font-style: italic;
-  }
-
-  /* prettylights-syntax-markup-bold */
-  .hljs-strong {
-    color: var(--ui-fg);
-    font-weight: bold;
-  }
-
-  /* prettylights-syntax-markup-inserted */
-  .hljs-addition {
-    color: var(--ui-indigo);
-    background-color: #f0fff4;
-  }
-
-  /* prettylights-syntax-markup-deleted */
-  .hljs-deletion {
-    color: var(--ui-ruby);
-    background-color: #ffeef0;
-  }
-
-  /* ============================================
-     Media - 媒体
-     ============================================ */
-
-  .j-content img {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--radius-lg);
-  }
-
-  .j-content figure {
-    margin: var(--content-block-space) 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(--content-caption-fg);
-    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 {
-    display: block;
-  }
-
-  /* ============================================
-     Horizontal Rule - 分割线
-     ============================================ */
-
-  .j-content hr {
-    margin: var(--content-block-space) 0;
-    border: 0;
-    height: 1px;
-    background: var(--content-border);
-  }
-
-  /* ============================================
-     Details / Summary - 折叠
-     ============================================ */
-
-  .j-content details {
-    margin: var(--content-block-space) 0;
-    padding: 1em;
-    background-color: var(--content-bg-subtle);
-    border-radius: var(--radius-lg);
-    border: 1px solid var(--content-border-subtle);
-  }
-
-  .j-content summary {
-    cursor: pointer;
-    font-weight: 600;
-    color: var(--content-heading-fg);
-    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] p,
-  .j-content details[open] ul,
-  .j-content details[open] ol,
-  .j-content details[open] > * {
-    margin-bottom: 1em;
-  }
-
-  /* .j-content details[open]>summary {
-    margin-bottom: 0.75em;
-  } */
-
-  .j-content details[open] > summary + * {
-    margin-top: 0;
-  }
-
-  .j-content details[open] > *:last-child {
-    margin-bottom: 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-space);
-    padding: 1em 1.25em;
-    background-color: var(--content-bg-subtle);
-    border-radius: var(--radius-lg);
-    color: var(--content-caption-fg);
-    font-size: 0.9375em;
-  }
-
-  /* ============================================
-     Block Item - 通用块级元素
-     ============================================ */
-
-  .j-content .block-item {
-    margin: var(--content-block-space) 0;
-  }
-
-  /* First/Last child margin reset */
-  .j-content > *:first-child {
-    margin-top: 0;
-  }
-
-  .j-content > *:last-child {
-    margin-bottom: 0;
-  }
-}