@xihan-ui/styles 1.0.0 → 2.0.0

package/css/thread.css

@@ -1,120 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='thread'] {
-    --xh-thread-skin: 1;
-  }
-
-  /* 自建定位上下文，作为绝对定位的回到底部按钮的参照系；
-     block-size: 100% 让高度由外部决定，使滚动发生在内部。 */
-  [data-scope='thread'][data-part='root'] {
-    /* 组件内那几档层号只在自己人之间排序：建一个层叠上下文把它们关起来，
-       既不让页面上的层号插进来，也不让它们漏出去压住别人 */
-    isolation: isolate;
-
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    block-size: 100%;
-  }
-
-  /* 上面声明的 display 会盖掉 UA 的 [hidden]{display:none}，这里补回 */
-  [data-scope='thread'][data-part='root'][hidden] {
-    display: none;
-  }
-
-  /* 滚动容器，粘底读的是它的 scrollTop / clientHeight / scrollHeight。
-     min-block-size: 0 让弹性子项能被压缩从而触发溢出；
-     overscroll-behavior: contain 阻止滚动量传给页面。 */
-  [data-scope='thread'][data-part='viewport'] {
-    flex: 1;
-    min-block-size: 0;
-    /* 逻辑属性 overflow-block 尚无可用实现，写物理轴 */
-    overflow-y: auto;
-    overscroll-behavior: contain;
-  }
-
-  /* 还在用原生滚动条的视口留一条空道，滚动条出现与消失时不推动文字。
-     带 data-xh-scrollbar 的容器已经把原生条藏成零宽，这条空道对它没有布局作用，排除掉 */
-  [data-scope='thread'][data-part='viewport']:not([data-xh-scrollbar]) {
-    scrollbar-gutter: stable;
-  }
-
-  /* 视口带 tabindex=0，需要焦点环；偏移取负画在内侧，避免被 root 裁掉 */
-  [data-scope='thread'][data-part='viewport']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: calc(-1 * var(--xh-ring-width));
-  }
-
-  /* 只定消息之间的竖向间距与上下留白，左右留白留给作者 */
-  [data-scope='thread'][data-part='content'] {
-    display: flex;
-    flex-direction: column;
-    gap: var(--xh-thread-content-gap, var(--xh-stack-gap-md));
-    padding-block: var(--xh-thread-content-py, var(--xh-space-4));
-  }
-
-  [data-scope='thread'][data-part='content'][hidden] {
-    display: none;
-  }
-
-  /* 浮在视口右下角，z-index 使其不受源序影响地盖在消息之上 */
-  [data-scope='thread'][data-part='scroll-button'] {
-    position: absolute;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--xh-thread-scroll-button-gap, var(--xh-control-gap-md));
-    inset-block-end: var(--xh-thread-scroll-button-inset, var(--xh-space-4));
-    inset-inline-end: var(--xh-thread-scroll-button-inset, var(--xh-space-4));
-    min-inline-size: var(--xh-thread-scroll-button-h, var(--xh-control-h-md));
-    block-size: var(--xh-thread-scroll-button-h, var(--xh-control-h-md));
-    padding-inline: var(--xh-thread-scroll-button-px, var(--xh-control-px-md));
-    border: var(--xh-stroke-thin) solid var(--xh-thread-scroll-button-border, var(--xh-border-control));
-    border-radius: var(--xh-thread-scroll-button-radius, var(--xh-shape-pill));
-    background: var(--xh-thread-scroll-button-bg, var(--xh-bg-surface));
-    color: var(--xh-thread-scroll-button-fg, var(--xh-fg-default));
-    box-shadow: var(--xh-thread-scroll-button-shadow, var(--xh-elevation-sheet));
-    /* 按钮默认不继承页面字族，显式继承 */
-    font-family: inherit;
-    font-size: var(--xh-thread-scroll-button-font-size, var(--xh-text-label-size));
-    font-weight: var(--xh-thread-scroll-button-font-weight, var(--xh-text-label-weight));
-    line-height: var(--xh-leading-none);
-    white-space: nowrap;
-    cursor: pointer;
-    user-select: none;
-    transition: background var(--xh-motion-duration-micro) var(--xh-motion-ease-enter);
-  }
-
-  /* 连接层收起按钮时写 hidden 属性，上面的 display 会盖掉 UA 规则，这里补回 */
-  [data-scope='thread'][data-part='scroll-button'][hidden] {
-    display: none;
-  }
-
-  [data-scope='thread'][data-part='scroll-button']:hover {
-    background: var(--xh-thread-scroll-button-bg-hover, var(--xh-bg-subtle-hover));
-  }
-
-  [data-scope='thread'][data-part='scroll-button']:active {
-    background: var(--xh-thread-scroll-button-bg-active, var(--xh-bg-subtle-active));
-  }
-
-  [data-scope='thread'][data-part='scroll-button']:focus-visible {
-    outline: var(--xh-ring-width) solid var(--xh-ring-focus);
-    outline-offset: var(--xh-ring-offset);
-  }
-
-  /* 视觉隐藏但仍参与播报：用 clip-path 裁到不可见，不能用 display:none 或 visibility:hidden；
-     white-space: nowrap 防止 1px 宽把文本挤成竖排。 */
-  [data-scope='thread'][data-part='live-region'] {
-    position: absolute;
-    inline-size: 1px;
-    block-size: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-}

package/css/time.css

@@ -1,25 +0,0 @@
-@layer xihan.components {
-  /* 皮肤在场的标记：开发模式下按 scope 探一次，取不到就说明这份皮肤没被引入。 */
-  [data-scope='time'] {
-    --xh-time-skin: 1;
-  }
-
-  [data-scope='time'][data-part='root'] {
-    color: var(--xh-time-fg, var(--xh-fg-default));
-    /* 等宽数字：秒数跳动时后面的字符不会左右挪 */
-    font-variant-numeric: tabular-nums;
-    /* 一个时间戳不该被拆到两行去 */
-    white-space: nowrap;
-  }
-
-  /* 相对说法是一句话不是一串数字，等宽数字反而把字距拉开 */
-  [data-scope='time'][data-part='root'][data-relative] {
-    font-variant-numeric: normal;
-  }
-
-  /* 没给时刻、或给了认不出的时刻：这时显示的是作者写在节点里的兜底文案，退成弱前景 */
-  [data-scope='time'][data-part='root'][data-state='empty'],
-  [data-scope='time'][data-part='root'][data-state='invalid'] {
-    color: var(--xh-time-placeholder-fg, var(--xh-fg-muted));
-  }
-}