@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-data.css

@@ -0,0 +1,687 @@
+/* fanUI v2.1.0 · module: data（独立产物，自带令牌） */
+.fanui-avatar {
+  --fanui-avatar-size: 40px;
+  --fanui-avatar-radius: 50%;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--fanui-avatar-size);
+  height: var(--fanui-avatar-size);
+  font-size: calc(var(--fanui-avatar-size) * 0.4);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--fanui-color-text-inverse);
+  background-color: var(--fanui-primary);
+  border-radius: var(--fanui-avatar-radius);
+  overflow: hidden;
+  user-select: none;
+  box-sizing: border-box;
+}
+.fanui-avatar > img,
+.fanui-avatar > video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+.fanui-avatar__icon {
+  display: inline-flex;
+  font-size: 1.1em;
+}
+.fanui-avatar__text {
+  font-size: 0.85em;
+  letter-spacing: 0.02em;
+}
+.fanui-avatar--xs {
+  --fanui-avatar-size: 24px;
+  font-size: 11px;
+}
+.fanui-avatar--sm {
+  --fanui-avatar-size: 32px;
+  font-size: 13px;
+}
+.fanui-avatar--md {
+  --fanui-avatar-size: 40px;
+}
+.fanui-avatar--lg {
+  --fanui-avatar-size: 48px;
+}
+.fanui-avatar--xl {
+  --fanui-avatar-size: 64px;
+  font-size: 22px;
+}
+.fanui-avatar--2xl {
+  --fanui-avatar-size: 80px;
+  font-size: 28px;
+}
+.fanui-avatar--square {
+  --fanui-avatar-radius: var(--fanui-radius-base);
+}
+.fanui-avatar--rounded {
+  --fanui-avatar-radius: var(--fanui-radius-lg);
+}
+.fanui-avatar--bordered {
+  border: 2px solid var(--fanui-color-surface);
+  box-shadow: var(--fanui-shadow-sm);
+}
+.fanui-avatar--primary {
+  background-color: var(--fanui-primary, #0e7490);
+  color: var(--fanui-primary-fg, #ffffff);
+}
+.fanui-avatar--accent {
+  background-color: var(--fanui-accent, #7c3aed);
+  color: var(--fanui-accent-fg, #ffffff);
+}
+.fanui-avatar--success {
+  background-color: var(--fanui-success, #047857);
+  color: var(--fanui-success-fg, #ffffff);
+}
+.fanui-avatar--warning {
+  background-color: var(--fanui-warning, #b45309);
+  color: var(--fanui-warning-fg, #ffffff);
+}
+.fanui-avatar--danger {
+  background-color: var(--fanui-danger, #b91c1c);
+  color: var(--fanui-danger-fg, #ffffff);
+}
+.fanui-avatar--info {
+  background-color: var(--fanui-info, #0369a1);
+  color: var(--fanui-info-fg, #ffffff);
+}
+.fanui-avatar--neutral {
+  background-color: var(--fanui-color-surface-sunken);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-avatar__status {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 28%;
+  height: 28%;
+  min-width: 8px;
+  min-height: 8px;
+  border-radius: 50%;
+  border: 2px solid var(--fanui-color-surface);
+  background-color: var(--fanui-color-text-subtle);
+  box-sizing: content-box;
+}
+.fanui-avatar__status--online {
+  background-color: var(--fanui-success);
+}
+.fanui-avatar__status--busy {
+  background-color: var(--fanui-danger);
+}
+.fanui-avatar__status--away {
+  background-color: var(--fanui-warning);
+}
+.fanui-avatar__status--offline {
+  background-color: var(--fanui-color-text-subtle);
+}
+
+.fanui-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.fanui-avatar-group > .fanui-avatar {
+  margin-inline-start: -10px;
+  border: 2px solid var(--fanui-color-surface);
+  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, z-index 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-avatar-group > .fanui-avatar:first-child {
+  margin-inline-start: 0;
+}
+.fanui-avatar-group > .fanui-avatar:hover {
+  transform: translateY(-2px);
+  z-index: 2;
+}
+.fanui-avatar-group--sm > .fanui-avatar {
+  margin-inline-start: -8px;
+}
+.fanui-avatar-group--lg > .fanui-avatar {
+  margin-inline-start: -12px;
+}
+.fanui-avatar-group__more {
+  background-color: var(--fanui-color-surface-sunken) !important;
+  color: var(--fanui-color-text-muted) !important;
+  font-size: 12px;
+}
+
+.fanui-avatar-media {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  min-width: 0;
+}
+.fanui-avatar-media__body {
+  min-width: 0;
+}
+.fanui-avatar-media__title {
+  font-size: var(--fanui-font-size-base);
+  font-weight: 500;
+  color: var(--fanui-color-text-strong);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fanui-avatar-media__desc {
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.fanui-list-group {
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  background-color: var(--fanui-color-surface);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-lg);
+  overflow: hidden;
+}
+.fanui-list-group--flush {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.fanui-list-group--separated {
+  gap: var(--fanui-space-2);
+  border: 0;
+  background: transparent;
+  overflow: visible;
+}
+
+.fanui-list-item {
+  display: flex;
+  align-items: center;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  font-size: var(--fanui-font-size-base);
+  color: var(--fanui-color-text);
+  background-color: transparent;
+  border-bottom: 1px solid var(--fanui-color-border);
+  text-decoration: none;
+  box-sizing: border-box;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-list-item:last-child {
+  border-bottom: 0;
+}
+.fanui-list-item--interactive {
+  cursor: pointer;
+}
+.fanui-list-item--interactive:hover {
+  background-color: var(--fanui-color-hover);
+  text-decoration: none;
+}
+.fanui-list-item--interactive:active {
+  background-color: var(--fanui-color-active);
+}
+.fanui-list-item--interactive:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-list-item--interactive:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-list-item.is-active, .fanui-list-item--active {
+  background-color: var(--fanui-primary-soft);
+  color: var(--fanui-primary);
+  border-color: var(--fanui-primary-border, var(--fanui-primary));
+  --fanui-color-text-subtle: var(--fanui-primary-ink, var(--fanui-color-text-muted));
+}
+.fanui-list-item.is-disabled {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.fanui-list-group--separated .fanui-list-item {
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  background-color: var(--fanui-color-surface);
+}
+.fanui-list-item__icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  width: 20px;
+  justify-content: center;
+  color: var(--fanui-color-text-muted);
+}
+.fanui-list-item__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fanui-list-item__title {
+  font-weight: 500;
+  color: var(--fanui-color-text-strong);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fanui-list-item__desc {
+  margin-top: 2px;
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.fanui-list-item__meta {
+  flex: 0 0 auto;
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-subtle);
+  white-space: nowrap;
+}
+.fanui-list-item__action {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+}
+.fanui-list-item--sm {
+  padding: 6px 12px;
+  font-size: var(--fanui-font-size-sm);
+}
+.fanui-list-item--lg {
+  padding: var(--fanui-space-4) var(--fanui-space-5);
+}
+
+.fanui-list-header {
+  padding: var(--fanui-space-3) var(--fanui-space-4);
+  font-size: var(--fanui-font-size-xs);
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--fanui-color-text-subtle);
+  background-color: var(--fanui-color-surface-sunken);
+  border-bottom: 1px solid var(--fanui-color-border);
+}
+
+.fanui-descriptions {
+  display: grid;
+  gap: var(--fanui-space-3) var(--fanui-space-6);
+  font-size: var(--fanui-font-size-base);
+}
+.fanui-descriptions__item {
+  min-width: 0;
+}
+.fanui-descriptions__label {
+  margin-bottom: 2px;
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-descriptions__value {
+  color: var(--fanui-color-text-strong);
+  word-break: break-word;
+}
+.fanui-descriptions--2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.fanui-descriptions--3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.fanui-descriptions--4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+@media (max-width: 767.95px) {
+  .fanui-descriptions--3, .fanui-descriptions--4 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+@media (max-width: 575.95px) {
+  .fanui-descriptions--2, .fanui-descriptions--3, .fanui-descriptions--4 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+.fanui-descriptions--inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fanui-space-5);
+  grid-template-columns: none;
+}
+.fanui-descriptions--inline .fanui-descriptions__item {
+  display: flex;
+  gap: 8px;
+}
+.fanui-descriptions--inline .fanui-descriptions__label {
+  margin-bottom: 0;
+}
+
+.fanui-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--fanui-space-1);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.fanui-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 8px;
+  font-size: var(--fanui-font-size-base);
+  font-weight: 500;
+  color: var(--fanui-color-text);
+  text-decoration: none;
+  background-color: transparent;
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-base);
+  cursor: pointer;
+  box-sizing: border-box;
+  user-select: none;
+  font-variant-numeric: tabular-nums;
+  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-pagination__item:hover:not(.is-disabled):not([aria-disabled=true]):not(.is-active) {
+  color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+  background-color: var(--fanui-primary-soft);
+  text-decoration: none;
+}
+.fanui-pagination__item:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 var(--fanui-focus-ring-offset, 1px) var(--fanui-color-surface, #fff), 0 0 0 calc(var(--fanui-focus-ring-offset, 1px) + var(--fanui-focus-ring-width, 3px)) var(--fanui-focus-ring-color, rgba(14, 116, 144, 0.3));
+}
+@media (forced-colors: active) {
+  .fanui-pagination__item:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+}
+.fanui-pagination__item.is-active, .fanui-pagination__item[aria-current=page] {
+  color: var(--fanui-primary-fg);
+  background-color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+}
+.fanui-pagination__item.is-disabled, .fanui-pagination__item[aria-disabled=true] {
+  color: var(--fanui-color-disabled-text);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.fanui-pagination__item--ellipsis {
+  border-color: transparent;
+  background: transparent;
+  color: var(--fanui-color-text-subtle);
+  cursor: default;
+  pointer-events: none;
+}
+.fanui-pagination__item--icon {
+  padding: 0;
+}
+.fanui-pagination__info {
+  margin-inline-start: var(--fanui-space-3);
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-pagination--borderless .fanui-pagination__item {
+  border-color: transparent;
+}
+.fanui-pagination--pill .fanui-pagination__item {
+  border-radius: 9999px;
+}
+.fanui-pagination--sm .fanui-pagination__item {
+  min-width: 26px;
+  height: 26px;
+  font-size: var(--fanui-font-size-sm);
+}
+.fanui-pagination--lg .fanui-pagination__item {
+  min-width: 38px;
+  height: 38px;
+  font-size: var(--fanui-font-size-md);
+}
+.fanui-pagination--center {
+  justify-content: center;
+}
+.fanui-pagination--end {
+  justify-content: flex-end;
+}
+.fanui-pagination--simple {
+  gap: var(--fanui-space-2);
+}
+.fanui-pagination--simple .fanui-pagination__item {
+  border-color: transparent;
+}
+
+.fanui-pagination-page-size {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fanui-space-2);
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-muted);
+}
+.fanui-pagination-page-size .fanui-select {
+  width: auto;
+  min-width: 72px;
+}
+
+.fanui-steps {
+  --fanui-step-dot: 28px;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.fanui-steps__item {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--fanui-space-2);
+}
+.fanui-steps__item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--fanui-step-dot) / 2);
+  left: calc(50% + var(--fanui-step-dot) / 2 + 6px);
+  right: calc(-50% + var(--fanui-step-dot) / 2 + 6px);
+  height: 2px;
+  background-color: var(--fanui-color-border);
+  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-steps__item.is-done:not(:last-child)::after {
+  background-color: var(--fanui-primary);
+}
+.fanui-steps__dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: var(--fanui-step-dot);
+  height: var(--fanui-step-dot);
+  font-size: var(--fanui-font-size-sm);
+  font-weight: 600;
+  line-height: 1;
+  color: var(--fanui-color-text-muted);
+  background-color: var(--fanui-color-surface);
+  border: 2px solid var(--fanui-color-border-strong);
+  border-radius: 50%;
+  box-sizing: border-box;
+  z-index: 1;
+  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s, border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-steps__title {
+  font-size: var(--fanui-font-size-base);
+  font-weight: 500;
+  color: var(--fanui-color-text-muted);
+  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+}
+.fanui-steps__desc {
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-subtle);
+  line-height: 1.5;
+}
+.fanui-steps__item.is-active .fanui-steps__dot {
+  color: var(--fanui-primary-fg);
+  background-color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+  box-shadow: 0 0 0 4px var(--fanui-primary-soft);
+}
+.fanui-steps__item.is-active .fanui-steps__title {
+  color: var(--fanui-color-text-strong);
+  font-weight: 600;
+}
+.fanui-steps__item.is-done .fanui-steps__dot {
+  color: var(--fanui-primary-fg);
+  background-color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+}
+.fanui-steps__item.is-done .fanui-steps__title {
+  color: var(--fanui-color-text);
+}
+.fanui-steps__item.is-error .fanui-steps__dot {
+  color: var(--fanui-danger-fg);
+  background-color: var(--fanui-danger);
+  border-color: var(--fanui-danger);
+}
+.fanui-steps__item.is-error .fanui-steps__title {
+  color: var(--fanui-danger);
+}
+.fanui-steps--simple .fanui-steps__item:not(:last-child)::after {
+  left: calc(var(--fanui-step-dot) / 2 + 8px);
+  right: calc(-50% + var(--fanui-step-dot) / 2 + 12px);
+}
+.fanui-steps--navigation {
+  gap: var(--fanui-space-3);
+  align-items: stretch;
+}
+.fanui-steps--navigation .fanui-steps__item {
+  flex-direction: row;
+  align-items: flex-start;
+  text-align: start;
+  gap: var(--fanui-space-3);
+  padding: var(--fanui-space-3);
+  border: 1px solid var(--fanui-color-border);
+  border-radius: var(--fanui-radius-md);
+  cursor: pointer;
+}
+.fanui-steps--navigation .fanui-steps__item::after {
+  display: none;
+}
+.fanui-steps--navigation .fanui-steps__item:hover {
+  border-color: var(--fanui-primary);
+}
+.fanui-steps--navigation .fanui-steps__item.is-active {
+  border-color: var(--fanui-primary);
+  background-color: var(--fanui-primary-soft);
+}
+.fanui-steps--navigation .fanui-steps__dot {
+  margin-top: 1px;
+}
+.fanui-steps--vertical {
+  flex-direction: column;
+  gap: 0;
+}
+.fanui-steps--vertical .fanui-steps__item {
+  flex-direction: row;
+  align-items: flex-start;
+  text-align: start;
+  gap: var(--fanui-space-3);
+  padding-bottom: var(--fanui-space-5);
+  flex: 0 0 auto;
+}
+.fanui-steps--vertical .fanui-steps__item:not(:last-child)::after {
+  top: calc(var(--fanui-step-dot) + 4px);
+  left: calc(var(--fanui-step-dot) / 2 - 1px);
+  right: auto;
+  bottom: 4px;
+  width: 2px;
+  height: auto;
+}
+.fanui-steps--vertical .fanui-steps__item:last-child {
+  padding-bottom: 0;
+}
+.fanui-steps--vertical .fanui-steps__body {
+  text-align: start;
+}
+.fanui-steps__body {
+  min-width: 0;
+}
+
+.fanui-timeline {
+  position: relative;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.fanui-timeline__item {
+  position: relative;
+  display: flex;
+  gap: var(--fanui-space-4);
+  padding-bottom: var(--fanui-space-5);
+}
+.fanui-timeline__item:last-child {
+  padding-bottom: 0;
+}
+.fanui-timeline__item:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 18px;
+  bottom: 0;
+  left: 6px;
+  width: 2px;
+  background-color: var(--fanui-color-border);
+}
+.fanui-timeline__dot {
+  position: relative;
+  flex: 0 0 auto;
+  width: 14px;
+  height: 14px;
+  margin-top: 4px;
+  background-color: var(--fanui-color-surface);
+  border: 2px solid var(--fanui-color-border-strong);
+  border-radius: 50%;
+  box-sizing: border-box;
+  z-index: 1;
+}
+.fanui-timeline__dot--primary {
+  background-color: var(--fanui-primary);
+  border-color: var(--fanui-primary);
+}
+.fanui-timeline__dot--success {
+  background-color: var(--fanui-success);
+  border-color: var(--fanui-success);
+}
+.fanui-timeline__dot--warning {
+  background-color: var(--fanui-warning);
+  border-color: var(--fanui-warning);
+}
+.fanui-timeline__dot--danger {
+  background-color: var(--fanui-danger);
+  border-color: var(--fanui-danger);
+}
+.fanui-timeline__body {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.fanui-timeline__time {
+  font-size: var(--fanui-font-size-sm);
+  color: var(--fanui-color-text-subtle);
+  font-variant-numeric: tabular-nums;
+}
+.fanui-timeline__title {
+  font-size: var(--fanui-font-size-base);
+  font-weight: 600;
+  color: var(--fanui-color-text-strong);
+}
+.fanui-timeline__desc {
+  margin-top: 4px;
+  font-size: var(--fanui-font-size-base);
+  line-height: 1.6;
+  color: var(--fanui-color-text-muted);
+}