@mathwiz/ui-components 0.1.29 → 0.1.30

package/dist/components/StatBlock/StatBlock.css

@@ -1,331 +1,331 @@
-/*
- * StatBlock 组件样式文件
- * 注意：组件不内置样式体系，业务项目控制实际样式
- * 以下提供CSS变量定义和类名结构，以及可选的默认主题示例
- * 业务项目可以完全覆盖这些变量或使用默认主题
- */
-
-/* ========================
- * CSS 变量定义（设计令牌）- 核心主题化变量
- * ======================== */
-
-.mathwiz-statblock {
-  /* 主题色控制 - 通过行内样式覆盖实现主题切换 */
-  --statblock-current-theme-color: var(--mathwiz-statblock-theme-green, #90c842);
-
-  /* 背景与容器 */
-  --statblock-bg: var(--mathwiz-statblock-bg-base, #f4f4f4);
-  --statblock-header-bg: var(--statblock-current-theme-color);
-  --statblock-border: var(--mathwiz-statblock-border-light, #e6e6e6);
-  --statblock-shadow: none;
-
-  /* 文本颜色 */
-  --statblock-text-inverse: var(--mathwiz-statblock-text-inverse, #ffffff);
-  --statblock-text-main: var(--mathwiz-statblock-text-main, #737068);
-  --statblock-text-muted: var(--mathwiz-statblock-text-muted, #c1c1c1);
-  --statblock-label: var(--statblock-text-inverse);
-  --statblock-value: var(--statblock-text-main);
-  --statblock-unit: var(--statblock-text-muted);
-
-  /* 排版 */
-  --statblock-font-family-header: var(--mathwiz-statblock-font-family-header, 'Zilla Slab', serif);
-  --statblock-font-family-number: var(--mathwiz-statblock-font-family-number, 'Open Sans', sans-serif);
-  --statblock-font-size-title-main: var(--mathwiz-statblock-font-size-title-main, 18px);
-  --statblock-font-size-title-sub: var(--mathwiz-statblock-font-size-title-sub, 14px);
-  --statblock-font-size-value-large: var(--mathwiz-statblock-font-size-value-large, 48px);
-  --statblock-font-size-time-value: var(--mathwiz-statblock-font-size-time-value, 16px);
-  --statblock-font-size-time-label: var(--mathwiz-statblock-font-size-time-label, 11px);
-
-  /* 尺寸与间距 */
-  --statblock-sidebar-width: var(--mathwiz-statblock-sidebar-width, 140px);
-  --statblock-spacing-xs: var(--mathwiz-statblock-spacing-xs, 4px);
-  --statblock-spacing-sm: var(--mathwiz-statblock-spacing-sm, 8px);
-  --statblock-spacing-md: var(--mathwiz-statblock-spacing-md, 16px);
-  --statblock-spacing-lg: var(--mathwiz-statblock-spacing-lg, 24px);
-  --statblock-spacing-xl: var(--mathwiz-statblock-spacing-xl, 32px);
-  --statblock-padding: var(--statblock-spacing-sm) var(--statblock-spacing-xs);
-  --statblock-gap: var(--statblock-spacing-md);
-  --statblock-icon-gap: var(--statblock-spacing-sm);
-
-  /* 圆角 */
-  --statblock-radius: 0;
-
-  /* 交互状态 */
-  --statblock-hover-bg: rgba(255, 255, 255, 0.1);
-  --statblock-active-bg: rgba(255, 255, 255, 0.2);
-  --statblock-focus-ring: #3b82f6;
-
-  /* 时间显示专用 */
-  --statblock-time-bg: var(--mathwiz-statblock-bg-white, #ffffff);
-  --statblock-time-border: var(--statblock-border);
-  --statblock-time-value-color: var(--mathwiz-statblock-theme-blue, #4cb2d4);
-}
-
-/* ========================
- * 预定义主题色变量 - 业务项目可覆盖
- * ======================== */
-
-:root {
-  /* 主题色系 - 用于StatBlock头部背景 */
-  --mathwiz-statblock-theme-green: #90c842;
-  --mathwiz-statblock-theme-blue: #4cb2d4;
-  --mathwiz-statblock-theme-orange: #d96338;
-
-  /* 基础色系 */
-  --mathwiz-statblock-bg-base: #f4f4f4;
-  --mathwiz-statblock-bg-white: #ffffff;
-  --mathwiz-statblock-text-inverse: #ffffff;
-  --mathwiz-statblock-text-main: #737068;
-  --mathwiz-statblock-text-muted: #c1c1c1;
-  --mathwiz-statblock-border-light: #e6e6e6;
-
-  /* 字体排版 */
-  --mathwiz-statblock-font-family-header: 'Zilla Slab', serif;
-  --mathwiz-statblock-font-family-number: 'Open Sans', sans-serif;
-  --mathwiz-statblock-font-size-title-main: 18px;
-  --mathwiz-statblock-font-size-title-sub: 14px;
-  --mathwiz-statblock-font-size-value-large: 48px;
-  --mathwiz-statblock-font-size-time-value: 16px;
-  --mathwiz-statblock-font-size-time-label: 11px;
-
-  /* 尺寸与间距 */
-  --mathwiz-statblock-sidebar-width: 140px;
-  --mathwiz-statblock-spacing-xs: 4px;
-  --mathwiz-statblock-spacing-sm: 8px;
-  --mathwiz-statblock-spacing-md: 16px;
-  --mathwiz-statblock-spacing-lg: 24px;
-  --mathwiz-statblock-spacing-xl: 32px;
-}
-
-/* ========================
- * 默认样式实现 - 可选的完整样式示例
- * 业务项目可以选择使用这些样式，或完全覆盖
- * ======================== */
-
-/* 根容器 - 基于demo.html的stat-block设计 */
-.mathwiz-statblock {
-  width: var(--statblock-sidebar-width);
-  display: flex;
-  flex-direction: column;
-  background-color: var(--statblock-bg);
-  position: relative;
-  box-sizing: border-box;
-}
-
-/* 头部容器 - 主题色背景 */
-.mathwiz-statblock-header {
-  background-color: var(--statblock-header-bg);
-  padding: var(--statblock-padding);
-  text-align: center;
-  color: var(--statblock-label);
-  font-family: var(--statblock-font-family-header);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: 60px;
-}
-
-/* 头部标题文本 */
-.mathwiz-statblock-title {
-  font-size: var(--statblock-font-size-title-main);
-  font-weight: 700;
-  line-height: 1.1;
-}
-
-.mathwiz-statblock-subtitle {
-  font-size: var(--statblock-font-size-title-sub);
-  font-weight: 600;
-  margin-top: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-/* 帮助图标 */
-.mathwiz-statblock-help-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  background-color: var(--statblock-text-inverse);
-  color: var(--statblock-current-theme-color);
-  border-radius: 50%;
-  font-family: var(--statblock-font-family-number);
-  font-size: 10px;
-  font-weight: bold;
-  cursor: help;
-}
-
-/* 主体容器 */
-.mathwiz-statblock-body {
-  padding: var(--statblock-spacing-xl) 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  min-height: 100px;
-}
-
-/* 单一巨大数字样式 */
-.mathwiz-statblock-value-large {
-  font-family: var(--statblock-font-family-number);
-  font-size: var(--statblock-font-size-value-large);
-  font-weight: 700;
-  color: var(--statblock-value);
-  line-height: 1;
-}
-
-/* ========================
- * 时间显示子组件样式
- * 当contentType为'time'时使用
- * ======================== */
-
-.mathwiz-statblock-time-display {
-  display: flex;
-  gap: var(--statblock-spacing-xs);
-  padding: 0 var(--statblock-spacing-xs);
-}
-
-.mathwiz-statblock-time-unit {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-}
-
-.mathwiz-statblock-time-unit-box {
-  background: var(--statblock-time-bg);
-  border: 1px solid var(--statblock-time-border);
-  width: 38px;
-  height: 38px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-family: var(--statblock-font-family-number);
-  font-size: var(--statblock-font-size-time-value);
-  color: var(--statblock-time-value-color);
-  font-weight: 700;
-}
-
-.mathwiz-statblock-time-unit-label {
-  font-family: var(--statblock-font-family-header);
-  font-size: var(--statblock-font-size-time-label);
-  color: var(--statblock-text-muted);
-  font-weight: 700;
-}
-
-/* ========================
- * 容器复合组件 - ProgressPanel
- * 用于容纳多个StatBlock无缝垂直拼合
- * ======================== */
-
-.mathwiz-statblock-progress-panel {
-  display: flex;
-  flex-direction: column;
-}
-
-/* 给除了最后的子元素加一条微妙的分割线 */
-.mathwiz-statblock-progress-panel .mathwiz-statblock + .mathwiz-statblock .mathwiz-statblock-header {
-  border-top: 1px solid rgba(255, 255, 255, 0.2);
-}
-
-/* ========================
- * 交互模式样式
- * ======================== */
-
-.mathwiz-statblock-interactive {
-  cursor: pointer;
-  user-select: none;
-}
-
-.mathwiz-statblock-interactive:hover .mathwiz-statblock-header {
-  background-color: color-mix(in srgb, var(--statblock-header-bg) 90%, black);
-}
-
-.mathwiz-statblock-interactive:active .mathwiz-statblock-header {
-  background-color: color-mix(in srgb, var(--statblock-header-bg) 80%, black);
-}
-
-.mathwiz-statblock-interactive:focus-visible {
-  outline: 2px solid var(--statblock-focus-ring);
-  outline-offset: 2px;
-}
-
-/* ========================
- * 响应式设计
- * ======================== */
-
-@media (max-width: 768px) {
-  .mathwiz-statblock {
-    width: 100%;
-    max-width: var(--statblock-sidebar-width);
-  }
-
-  .mathwiz-statblock-title {
-    font-size: calc(var(--statblock-font-size-title-main) * 0.9);
-  }
-
-  .mathwiz-statblock-value-large {
-    font-size: calc(var(--statblock-font-size-value-large) * 0.8);
-  }
-}
-
-/* ========================
- * 向后兼容层 - 保留旧的类名结构供现有代码使用
- * ======================== */
-
-/* 旧版类名兼容 */
-.mathwiz-statblock-content {
-  composes: mathwiz-statblock-body;
-}
-
-.mathwiz-statblock-text {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.mathwiz-statblock-label {
-  composes: mathwiz-statblock-title;
-}
-
-.mathwiz-statblock-value-container {
-  display: flex;
-  align-items: baseline;
-  gap: 0.25em;
-}
-
-.mathwiz-statblock-value {
-  composes: mathwiz-statblock-value-large;
-}
-
-.mathwiz-statblock-unit {
-  font-size: var(--statblock-font-size-title-sub);
-  color: var(--statblock-unit);
-}
-
-/* 图标位置容器 - 旧版兼容 */
-.mathwiz-statblock-icon-top {
-  display: flex;
-  justify-content: center;
-  margin-bottom: var(--statblock-icon-gap, 0.5rem);
-}
-
-.mathwiz-statblock-icon-left {
-  display: flex;
-  align-items: center;
-  margin-right: var(--statblock-icon-gap, 0.75rem);
-}
-
-.mathwiz-statblock-icon-right {
-  display: flex;
-  align-items: center;
-  margin-left: var(--statblock-icon-gap, 0.75rem);
-}
-
-.mathwiz-statblock-icon-bottom {
-  display: flex;
-  justify-content: center;
-  margin-top: var(--statblock-icon-gap, 0.5rem);
+/*
+ * StatBlock 组件样式文件
+ * 注意：组件不内置样式体系，业务项目控制实际样式
+ * 以下提供CSS变量定义和类名结构，以及可选的默认主题示例
+ * 业务项目可以完全覆盖这些变量或使用默认主题
+ */
+
+/* ========================
+ * CSS 变量定义（设计令牌）- 核心主题化变量
+ * ======================== */
+
+.mathwiz-statblock {
+  /* 主题色控制 - 通过行内样式覆盖实现主题切换 */
+  --statblock-current-theme-color: var(--mathwiz-statblock-theme-green, #90c842);
+
+  /* 背景与容器 */
+  --statblock-bg: var(--mathwiz-statblock-bg-base, #f4f4f4);
+  --statblock-header-bg: var(--statblock-current-theme-color);
+  --statblock-border: var(--mathwiz-statblock-border-light, #e6e6e6);
+  --statblock-shadow: none;
+
+  /* 文本颜色 */
+  --statblock-text-inverse: var(--mathwiz-statblock-text-inverse, #ffffff);
+  --statblock-text-main: var(--mathwiz-statblock-text-main, #737068);
+  --statblock-text-muted: var(--mathwiz-statblock-text-muted, #c1c1c1);
+  --statblock-label: var(--statblock-text-inverse);
+  --statblock-value: var(--statblock-text-main);
+  --statblock-unit: var(--statblock-text-muted);
+
+  /* 排版 */
+  --statblock-font-family-header: var(--mathwiz-statblock-font-family-header, 'Zilla Slab', serif);
+  --statblock-font-family-number: var(--mathwiz-statblock-font-family-number, 'Open Sans', sans-serif);
+  --statblock-font-size-title-main: var(--mathwiz-statblock-font-size-title-main, 18px);
+  --statblock-font-size-title-sub: var(--mathwiz-statblock-font-size-title-sub, 14px);
+  --statblock-font-size-value-large: var(--mathwiz-statblock-font-size-value-large, 48px);
+  --statblock-font-size-time-value: var(--mathwiz-statblock-font-size-time-value, 16px);
+  --statblock-font-size-time-label: var(--mathwiz-statblock-font-size-time-label, 11px);
+
+  /* 尺寸与间距 */
+  --statblock-sidebar-width: var(--mathwiz-statblock-sidebar-width, 140px);
+  --statblock-spacing-xs: var(--mathwiz-statblock-spacing-xs, 4px);
+  --statblock-spacing-sm: var(--mathwiz-statblock-spacing-sm, 8px);
+  --statblock-spacing-md: var(--mathwiz-statblock-spacing-md, 16px);
+  --statblock-spacing-lg: var(--mathwiz-statblock-spacing-lg, 24px);
+  --statblock-spacing-xl: var(--mathwiz-statblock-spacing-xl, 32px);
+  --statblock-padding: var(--statblock-spacing-sm) var(--statblock-spacing-xs);
+  --statblock-gap: var(--statblock-spacing-md);
+  --statblock-icon-gap: var(--statblock-spacing-sm);
+
+  /* 圆角 */
+  --statblock-radius: 0;
+
+  /* 交互状态 */
+  --statblock-hover-bg: rgba(255, 255, 255, 0.1);
+  --statblock-active-bg: rgba(255, 255, 255, 0.2);
+  --statblock-focus-ring: #3b82f6;
+
+  /* 时间显示专用 */
+  --statblock-time-bg: var(--mathwiz-statblock-bg-white, #ffffff);
+  --statblock-time-border: var(--statblock-border);
+  --statblock-time-value-color: var(--mathwiz-statblock-theme-blue, #4cb2d4);
+}
+
+/* ========================
+ * 预定义主题色变量 - 业务项目可覆盖
+ * ======================== */
+
+:root {
+  /* 主题色系 - 用于StatBlock头部背景 */
+  --mathwiz-statblock-theme-green: #90c842;
+  --mathwiz-statblock-theme-blue: #4cb2d4;
+  --mathwiz-statblock-theme-orange: #d96338;
+
+  /* 基础色系 */
+  --mathwiz-statblock-bg-base: #f4f4f4;
+  --mathwiz-statblock-bg-white: #ffffff;
+  --mathwiz-statblock-text-inverse: #ffffff;
+  --mathwiz-statblock-text-main: #737068;
+  --mathwiz-statblock-text-muted: #c1c1c1;
+  --mathwiz-statblock-border-light: #e6e6e6;
+
+  /* 字体排版 */
+  --mathwiz-statblock-font-family-header: 'Zilla Slab', serif;
+  --mathwiz-statblock-font-family-number: 'Open Sans', sans-serif;
+  --mathwiz-statblock-font-size-title-main: 18px;
+  --mathwiz-statblock-font-size-title-sub: 14px;
+  --mathwiz-statblock-font-size-value-large: 48px;
+  --mathwiz-statblock-font-size-time-value: 16px;
+  --mathwiz-statblock-font-size-time-label: 11px;
+
+  /* 尺寸与间距 */
+  --mathwiz-statblock-sidebar-width: 140px;
+  --mathwiz-statblock-spacing-xs: 4px;
+  --mathwiz-statblock-spacing-sm: 8px;
+  --mathwiz-statblock-spacing-md: 16px;
+  --mathwiz-statblock-spacing-lg: 24px;
+  --mathwiz-statblock-spacing-xl: 32px;
+}
+
+/* ========================
+ * 默认样式实现 - 可选的完整样式示例
+ * 业务项目可以选择使用这些样式，或完全覆盖
+ * ======================== */
+
+/* 根容器 - 基于demo.html的stat-block设计 */
+.mathwiz-statblock {
+  width: var(--statblock-sidebar-width);
+  display: flex;
+  flex-direction: column;
+  background-color: var(--statblock-bg);
+  position: relative;
+  box-sizing: border-box;
+}
+
+/* 头部容器 - 主题色背景 */
+.mathwiz-statblock-header {
+  background-color: var(--statblock-header-bg);
+  padding: var(--statblock-padding);
+  text-align: center;
+  color: var(--statblock-label);
+  font-family: var(--statblock-font-family-header);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-height: 60px;
+}
+
+/* 头部标题文本 */
+.mathwiz-statblock-title {
+  font-size: var(--statblock-font-size-title-main);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.mathwiz-statblock-subtitle {
+  font-size: var(--statblock-font-size-title-sub);
+  font-weight: 600;
+  margin-top: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+/* 帮助图标 */
+.mathwiz-statblock-help-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  background-color: var(--statblock-text-inverse);
+  color: var(--statblock-current-theme-color);
+  border-radius: 50%;
+  font-family: var(--statblock-font-family-number);
+  font-size: 10px;
+  font-weight: bold;
+  cursor: help;
+}
+
+/* 主体容器 */
+.mathwiz-statblock-body {
+  padding: var(--statblock-spacing-xl) 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100px;
+}
+
+/* 单一巨大数字样式 */
+.mathwiz-statblock-value-large {
+  font-family: var(--statblock-font-family-number);
+  font-size: var(--statblock-font-size-value-large);
+  font-weight: 700;
+  color: var(--statblock-value);
+  line-height: 1;
+}
+
+/* ========================
+ * 时间显示子组件样式
+ * 当contentType为'time'时使用
+ * ======================== */
+
+.mathwiz-statblock-time-display {
+  display: flex;
+  gap: var(--statblock-spacing-xs);
+  padding: 0 var(--statblock-spacing-xs);
+}
+
+.mathwiz-statblock-time-unit {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.mathwiz-statblock-time-unit-box {
+  background: var(--statblock-time-bg);
+  border: 1px solid var(--statblock-time-border);
+  width: 38px;
+  height: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: var(--statblock-font-family-number);
+  font-size: var(--statblock-font-size-time-value);
+  color: var(--statblock-time-value-color);
+  font-weight: 700;
+}
+
+.mathwiz-statblock-time-unit-label {
+  font-family: var(--statblock-font-family-header);
+  font-size: var(--statblock-font-size-time-label);
+  color: var(--statblock-text-muted);
+  font-weight: 700;
+}
+
+/* ========================
+ * 容器复合组件 - ProgressPanel
+ * 用于容纳多个StatBlock无缝垂直拼合
+ * ======================== */
+
+.mathwiz-statblock-progress-panel {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 给除了最后的子元素加一条微妙的分割线 */
+.mathwiz-statblock-progress-panel .mathwiz-statblock + .mathwiz-statblock .mathwiz-statblock-header {
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* ========================
+ * 交互模式样式
+ * ======================== */
+
+.mathwiz-statblock-interactive {
+  cursor: pointer;
+  user-select: none;
+}
+
+.mathwiz-statblock-interactive:hover .mathwiz-statblock-header {
+  background-color: color-mix(in srgb, var(--statblock-header-bg) 90%, black);
+}
+
+.mathwiz-statblock-interactive:active .mathwiz-statblock-header {
+  background-color: color-mix(in srgb, var(--statblock-header-bg) 80%, black);
+}
+
+.mathwiz-statblock-interactive:focus-visible {
+  outline: 2px solid var(--statblock-focus-ring);
+  outline-offset: 2px;
+}
+
+/* ========================
+ * 响应式设计
+ * ======================== */
+
+@media (max-width: 768px) {
+  .mathwiz-statblock {
+    width: 100%;
+    max-width: var(--statblock-sidebar-width);
+  }
+
+  .mathwiz-statblock-title {
+    font-size: calc(var(--statblock-font-size-title-main) * 0.9);
+  }
+
+  .mathwiz-statblock-value-large {
+    font-size: calc(var(--statblock-font-size-value-large) * 0.8);
+  }
+}
+
+/* ========================
+ * 向后兼容层 - 保留旧的类名结构供现有代码使用
+ * ======================== */
+
+/* 旧版类名兼容 */
+.mathwiz-statblock-content {
+  composes: mathwiz-statblock-body;
+}
+
+.mathwiz-statblock-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.mathwiz-statblock-label {
+  composes: mathwiz-statblock-title;
+}
+
+.mathwiz-statblock-value-container {
+  display: flex;
+  align-items: baseline;
+  gap: 0.25em;
+}
+
+.mathwiz-statblock-value {
+  composes: mathwiz-statblock-value-large;
+}
+
+.mathwiz-statblock-unit {
+  font-size: var(--statblock-font-size-title-sub);
+  color: var(--statblock-unit);
+}
+
+/* 图标位置容器 - 旧版兼容 */
+.mathwiz-statblock-icon-top {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--statblock-icon-gap, 0.5rem);
+}
+
+.mathwiz-statblock-icon-left {
+  display: flex;
+  align-items: center;
+  margin-right: var(--statblock-icon-gap, 0.75rem);
+}
+
+.mathwiz-statblock-icon-right {
+  display: flex;
+  align-items: center;
+  margin-left: var(--statblock-icon-gap, 0.75rem);
+}
+
+.mathwiz-statblock-icon-bottom {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--statblock-icon-gap, 0.5rem);
 }