vanilla-jui 1.4.5 → 1.4.6

package/src/css/components.css

@@ -25,4 +25,4 @@
 @import url('./editor.css');
 @import url('./menu.css');
 @import url('./toc.css');
-@import url('./form.css');
+@import url('./form.css');

package/src/css/content.css

@@ -1,5 +1,4 @@
 @layer content {
-
   /* ============================================
     Content - 文章阅读/编辑器预览样式
   ============================================ */
@@ -35,7 +34,8 @@
   .j-content h4,
   .j-content h5,
   .j-content h6 {
-    margin: var(--content-heading-space) 0 calc(var(--content-heading-space) * 0.75);
+    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);
@@ -70,12 +70,12 @@
   }
 
   /* 标题后的段落减少间距 */
-  .j-content h1+p,
-  .j-content h2+p,
-  .j-content h3+p,
-  .j-content h4+p,
-  .j-content h5+p,
-  .j-content h6+p {
+  .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);
   }
 
@@ -157,7 +157,9 @@
     text-decoration: none;
     text-decoration-color: transparent;
     text-underline-offset: 0.15em;
-    transition: color 0.15s, text-decoration-color 0.15s;
+    transition:
+      color 0.15s,
+      text-decoration-color 0.15s;
   }
 
   .j-content a:hover {
@@ -202,22 +204,26 @@
     list-style-type: decimal;
   }
 
-  .j-content ul ul {
-    list-style-type: circle;
+  .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 ol ol {
-    list-style-type: lower-alpha;
-    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;
   }
@@ -249,7 +255,7 @@
     color: var(--tone-body);
   }
 
-  .j-content dd+dt {
+  .j-content dd + dt {
     margin-top: 1em;
   }
 
@@ -277,7 +283,7 @@
     margin: 0;
   }
 
-  .j-content blockquote p+p {
+  .j-content blockquote p + p {
     margin-top: 0.75em;
   }
 
@@ -296,8 +302,9 @@
   /* ============================================
     Code - 代码
   ============================================ */
-  .j-content code:not([class*="language-"]) {
-    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+  .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);
@@ -356,8 +363,8 @@
     align-items: center;
     justify-content: space-between;
     gap: 12px;
-    padding: .5rem 1rem 0;
-    font-size: .78rem;
+    padding: 0.5rem 1rem 0;
+    font-size: 0.78rem;
   }
 
   .j-code-editor .code-header .code-dots {
@@ -365,12 +372,14 @@
     height: 8px;
     border-radius: 50%;
     background: var(--state-success);
-    box-shadow: 14px 0 0 var(--state-warning), 28px 0 0 var(--state-danger);
+    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: .75rem;
+    font-size: 0.75rem;
     color: var(--ui-fg-soft);
   }
 
@@ -384,25 +393,24 @@
     display: none;
   }
 
-  .j-content pre code[class*="language-"] {
+  .j-content pre code[class*='language-'] {
     display: block;
     overflow-x: auto;
     padding: 1.25em 1.5em;
   }
 
-  .j-content pre.j-code-editor .code-header+code[class*="language-"] {
-    padding: .5rem 1rem 1rem;
+  .j-content pre.j-code-editor .code-header + code[class*='language-'] {
+    padding: 0.5rem 1rem 1rem;
   }
 
-  /* 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)
+  /* purposely ignored */
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    color: var(--ui-gray);
   }
 
   /* prettylights-syntax-entity */
@@ -410,7 +418,7 @@
   .hljs-title.class_,
   .hljs-title.class_.inherited__,
   .hljs-title.function_ {
-    color: var(--ui-violet)
+    color: var(--ui-violet);
   }
 
   /* prettylights-syntax-constant */
@@ -424,27 +432,38 @@
   .hljs-selector-attr,
   .hljs-selector-class,
   .hljs-selector-id {
-    color: var(--ui-teal)
+    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)
+    color: var(--ui-pink);
   }
 
   /* prettylights-syntax-variable */
   .hljs-built_in,
   .hljs-symbol {
-    color: var(--ui-orange)
+    color: var(--ui-orange);
   }
 
   /* prettylights-syntax-comment */
   .hljs-comment,
   .hljs-code,
   .hljs-formula {
-    color: var(--ui-gray-shade)
+    color: var(--ui-gray-shade);
   }
 
   /* prettylights-syntax-entity-tag */
@@ -457,36 +476,36 @@
 
   /* prettylights-syntax-storage-modifier-import */
   .hljs-subst {
-    color: var(--ui-fg)
+    color: var(--ui-fg);
   }
 
   /* prettylights-syntax-markup-heading */
   .hljs-section {
     color: var(--ui-teal);
-    font-weight: bold
+    font-weight: bold;
   }
 
   /* prettylights-syntax-markup-list */
   .hljs-bullet {
-    color: var(--ui-gold)
+    color: var(--ui-gold);
   }
 
   /* prettylights-syntax-markup-italic */
   .hljs-emphasis {
     color: var(--ui-fg);
-    font-style: italic
+    font-style: italic;
   }
 
   /* prettylights-syntax-markup-bold */
   .hljs-strong {
     color: var(--ui-fg);
-    font-weight: bold
+    font-weight: bold;
   }
 
   /* prettylights-syntax-markup-inserted */
   .hljs-addition {
     color: var(--ui-indigo);
-    background-color: #f0fff4
+    background-color: #f0fff4;
   }
 
   /* prettylights-syntax-markup-deleted */
@@ -495,16 +514,6 @@
     background-color: #ffeef0;
   }
 
-  /* purposely ignored */
-  .hljs-char.escape_,
-  .hljs-link,
-  .hljs-params,
-  .hljs-property,
-  .hljs-punctuation,
-  .hljs-tag {
-    color: var(--ui-lime);
-  }
-
   /* ============================================
      Media - 媒体
      ============================================ */
@@ -638,14 +647,14 @@
     transition: transform 0.2s ease;
   }
 
-  .j-content details[open]>summary::before {
+  .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]>* {
+  .j-content details[open] > * {
     margin-bottom: 1em;
   }
 
@@ -653,11 +662,11 @@
     margin-bottom: 0.75em;
   } */
 
-  .j-content details[open]>summary+* {
+  .j-content details[open] > summary + * {
     margin-top: 0;
   }
 
-  .j-content details[open]>*:last-child {
+  .j-content details[open] > *:last-child {
     margin-bottom: 0;
   }
 
@@ -702,11 +711,11 @@
   }
 
   /* First/Last child margin reset */
-  .j-content>*:first-child {
+  .j-content > *:first-child {
     margin-top: 0;
   }
 
-  .j-content>*:last-child {
+  .j-content > *:last-child {
     margin-bottom: 0;
   }
-}
+}

package/src/css/drop.css

@@ -25,4 +25,4 @@
     color: var(--drop-fg);
     box-shadow: var(--drop-box-shadow);
   }
-}
+}

package/src/css/editor.css

@@ -1,16 +1,16 @@
 @layer components {
-    #j-editor {
-        max-width: var(--editor-max-width);
-        border-width: var(--editor-border-width);
-        border-style: var(--editor-border-style);
-        border-color: var(--editor-border-color);
-        border-top: none;
-        border-bottom: none;
-        min-height: var(--editor-min-height);
-        padding: var(--editor-padding);
-    }
+  #j-editor {
+    max-width: var(--editor-max-width);
+    border-width: var(--editor-border-width);
+    border-style: var(--editor-border-style);
+    border-color: var(--editor-border-color);
+    border-top: none;
+    border-bottom: none;
+    min-height: var(--editor-min-height);
+    padding: var(--editor-padding);
+  }
 
-    .ProseMirror {
-        outline: 0;
-    }
-}
+  .ProseMirror {
+    outline: 0;
+  }
+}

package/src/css/flow.css

@@ -10,18 +10,7 @@
 
   .j-flow .flow-header {
     display: grid;
-    gap: calc(var(--space) / 2);
-  }
-
-  .j-flow .flow-title {
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-  }
-
-  .j-flow .flow-description {
-    color: var(--ui-fg-muted);
-    font-size: var(--font-size-sm);
-    line-height: var(--line-height-paragraph);
+    gap: var(--flow-gap);
   }
 
   .j-flow .flow-steps {
@@ -72,7 +61,7 @@
     color: var(--tone-fg);
   }
 
-  s .j-flow .flow-body {
+  .j-flow .flow-body {
     min-width: 0;
   }
 
@@ -82,5 +71,6 @@
     gap: var(--space);
     justify-content: flex-end;
     padding-top: var(--flow-gap);
+    position: relative;
   }
-}
+}

package/src/css/font.css

@@ -2,8 +2,8 @@
   @font-face {
     font-family: Emoji;
     src:
-      local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol'),
-      local('Noto Color Emoji');
+      local('Apple Color Emoji'), local('Segoe UI Emoji'),
+      local('Segoe UI Symbol'), local('Noto Color Emoji');
     unicode-range: U+1F000-1F644, U+203C-3299;
   }
 
@@ -12,7 +12,8 @@
   }
 
   .font-mono {
-    font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-family:
+      Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   }
 
   .font-math {
@@ -20,4 +21,4 @@
       Cambria Math,
       Latin Modern Math;
   }
-}
+}