advance-semi-theme 1.0.0

package/dist/antd/styles/components/floatbutton.css

@@ -0,0 +1,65 @@
+/**
+ * FloatButton 悬浮按钮 - Semi Design 风格
+ */
+
+body.semi .ant-float-btn {
+  background-color: #fff;
+  border-radius: var(--semi-border-radius-full);
+  box-shadow: var(--semi-shadow-elevated);
+  color: var(--semi-color-text-1);
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-float-btn:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .ant-float-btn-primary {
+  background-color: var(--semi-color-primary);
+  color: #fff;
+}
+
+body.semi .ant-float-btn-primary:hover {
+  background-color: var(--semi-color-primary-hover);
+}
+
+body.semi .ant-float-btn-icon {
+  font-size: 20px;
+}
+
+body.semi .ant-float-btn-description {
+  font-size: var(--semi-font-size-small);
+  color: var(--semi-color-text-2);
+}
+
+/* 组 */
+body.semi .ant-float-btn-group {
+  box-shadow: var(--semi-shadow-elevated);
+  border-radius: var(--semi-border-radius-full);
+}
+
+body.semi .ant-float-btn-group .ant-float-btn {
+  box-shadow: none;
+}
+
+body.semi .ant-float-btn-group .ant-float-btn:first-child {
+  border-radius: var(--semi-border-radius-full) var(--semi-border-radius-full) 0 0;
+}
+
+body.semi .ant-float-btn-group .ant-float-btn:last-child {
+  border-radius: 0 0 var(--semi-border-radius-full) var(--semi-border-radius-full);
+}
+
+body.semi .ant-float-btn-group-circle .ant-float-btn-body {
+  border-radius: var(--semi-border-radius-full);
+}
+
+/* 方形 */
+body.semi .ant-float-btn-square {
+  border-radius: var(--semi-border-radius-small);
+}
+
+/* 徽章 */
+body.semi .ant-float-btn .ant-badge-count {
+  background-color: var(--semi-color-danger);
+}

package/dist/antd/styles/components/form.css

@@ -0,0 +1,90 @@
+/**
+ * Form 表单 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form {
+  color: var(--semi-color-text-0);
+}
+
+/* 表单项标签 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-label > label {
+  color: var(--semi-color-text-0);
+  font-weight: 500;
+}
+
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-label > label::after {
+  display: none;
+}
+
+/* 必填标记 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-required::before {
+  color: var(--semi-color-danger);
+  margin-inline-end: 4px;
+}
+
+/* 说明文字 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-explain {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  margin-top: 4px;
+}
+
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-explain-error {
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-explain-warning {
+  color: var(--semi-color-warning);
+}
+
+/* 额外说明 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-extra {
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-small);
+  margin-top: 4px;
+}
+
+/* 错误状态反馈图标 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-has-error .ant-form-item-feedback-icon {
+  color: var(--semi-color-danger);
+}
+
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-has-warning .ant-form-item-feedback-icon {
+  color: var(--semi-color-warning);
+}
+
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-has-success .ant-form-item-feedback-icon {
+  color: var(--semi-color-success);
+}
+
+/* 验证中 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item-is-validating .ant-form-item-feedback-icon {
+  color: var(--semi-color-primary);
+}
+
+/* 表单项间距 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-item {
+  margin-bottom: 24px;
+}
+
+/* 紧凑布局 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-small .ant-form-item {
+  margin-bottom: 16px;
+}
+
+/* 水平布局 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-horizontal .ant-form-item-label {
+  text-align: right;
+  padding-inline-end: 8px;
+}
+
+/* 内联布局 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-inline .ant-form-item {
+  margin-inline-end: 16px;
+  margin-bottom: 0;
+}
+
+/* 垂直布局 */
+.semi:where([data-semi="all"], [data-semi-form]) .ant-form-vertical .ant-form-item-label {
+  padding-bottom: 4px;
+}

package/dist/antd/styles/components/grid.css

@@ -0,0 +1,11 @@
+/**
+ * Grid 栅格 (Row/Col) - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-grid]) .ant-row {
+  margin-bottom: 16px;
+}
+
+.semi:where([data-semi="all"], [data-semi-grid]) .ant-row:last-child {
+  margin-bottom: 0;
+}

package/dist/antd/styles/components/icon.css

@@ -0,0 +1,18 @@
+/**
+ * Icon 图标 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-icon]) .anticon {
+  color: inherit;
+  font-size: inherit;
+  line-height: 1;
+  vertical-align: -0.125em;
+}
+
+.semi:where([data-semi="all"], [data-semi-icon]) .anticon-spin::before {
+  animation: loadingCircle 1s infinite linear;
+}
+
+.semi:where([data-semi="all"], [data-semi-icon]) .anticon-spin {
+  animation: loadingCircle 1s infinite linear;
+}

package/dist/antd/styles/components/image.css

@@ -0,0 +1,125 @@
+/**
+ * Image 图片 - Semi Design 风格
+ */
+
+.semi:where([data-semi="all"], [data-semi-image]) .ant-image {
+  border-radius: var(--semi-border-radius-medium);
+  overflow: hidden;
+}
+
+/* 遮罩 */
+.semi:where([data-semi="all"], [data-semi-image]) .ant-image-mask {
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: var(--semi-border-radius-medium);
+}
+
+.semi:where([data-semi="all"], [data-semi-image]) .ant-image-mask-info {
+  color: #fff;
+  font-size: var(--semi-font-size-regular);
+}
+
+/* 占位符 */
+.semi:where([data-semi="all"], [data-semi-image]) .ant-image-placeholder {
+  background: var(--semi-color-fill-0);
+}
+
+/* 错误状态 */
+.semi:where([data-semi="all"], [data-semi-image]) .ant-image-error {
+  background: var(--semi-color-fill-0);
+}
+
+/* ==========================================================================
+   图片预览 (Portal 组件 - 渲染在 body 下)
+   ========================================================================== */
+
+body.semi .ant-image-preview-mask,
+.semi .ant-image-preview-mask {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+body.semi .ant-image-preview-wrap,
+.semi .ant-image-preview-wrap {
+  z-index: 1080;
+}
+
+body.semi .ant-image-preview-operations,
+.semi .ant-image-preview-operations {
+  background: rgba(0, 0, 0, 0.1);
+  padding: 12px 24px;
+}
+
+body.semi .ant-image-preview-operations-operation,
+.semi .ant-image-preview-operations-operation {
+  color: rgba(255, 255, 255, 0.85);
+  padding: 12px;
+  border-radius: var(--semi-border-radius-small);
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-image-preview-operations-operation:hover,
+.semi .ant-image-preview-operations-operation:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+body.semi .ant-image-preview-operations-operation-disabled,
+.semi .ant-image-preview-operations-operation-disabled {
+  color: rgba(255, 255, 255, 0.35);
+  cursor: not-allowed;
+}
+
+/* 切换按钮 */
+body.semi .ant-image-preview-switch-left,
+body.semi .ant-image-preview-switch-right,
+.semi .ant-image-preview-switch-left,
+.semi .ant-image-preview-switch-right {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: var(--semi-border-radius-full);
+  color: rgba(255, 255, 255, 0.85);
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .ant-image-preview-switch-left:hover,
+body.semi .ant-image-preview-switch-right:hover,
+.semi .ant-image-preview-switch-left:hover,
+.semi .ant-image-preview-switch-right:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+body.semi .ant-image-preview-switch-left-disabled,
+body.semi .ant-image-preview-switch-right-disabled,
+.semi .ant-image-preview-switch-left-disabled,
+.semi .ant-image-preview-switch-right-disabled {
+  color: rgba(255, 255, 255, 0.35);
+  cursor: not-allowed;
+}
+
+/* 图片容器 */
+body.semi .ant-image-preview-img-wrapper,
+.semi .ant-image-preview-img-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 关闭按钮 */
+body.semi .ant-image-preview-close,
+.semi .ant-image-preview-close {
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 18px;
+}
+
+body.semi .ant-image-preview-close:hover,
+.semi .ant-image-preview-close:hover {
+  color: #fff;
+}
+
+/* 底部工具栏 */
+body.semi .ant-image-preview-footer,
+.semi .ant-image-preview-footer {
+  color: rgba(255, 255, 255, 0.85);
+}