advance-semi-theme 1.0.0

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

@@ -0,0 +1,106 @@
+/**
+ * Element Plus Form - Semi Design 风格
+ * 覆盖原有 .el-form 样式
+ */
+
+/* 表单项 */
+.semi .el-form-item {
+  margin-bottom: 24px;
+}
+
+/* 标签 */
+.semi .el-form-item__label {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  font-weight: 400;
+  line-height: 20px;
+  padding-bottom: 4px;
+}
+
+/* 必填标记 */
+.semi .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before,
+.semi .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before {
+  color: var(--semi-color-danger);
+  margin-right: 4px;
+}
+
+/* 右侧必填标记 */
+.semi .el-form-item.is-required:not(.is-no-asterisk).asterisk-right > .el-form-item__label::after,
+.semi .el-form-item.is-required:not(.is-no-asterisk).asterisk-right .el-form-item__label-wrap > .el-form-item__label::after {
+  color: var(--semi-color-danger);
+  margin-left: 4px;
+}
+
+/* 错误信息 */
+.semi .el-form-item__error {
+  color: var(--semi-color-danger);
+  font-size: 12px;
+  line-height: 20px;
+  padding-top: 4px;
+}
+
+/* 错误状态输入框 */
+.semi .el-form-item.is-error .el-input__wrapper {
+  border-color: var(--semi-color-danger);
+}
+
+.semi .el-form-item.is-error .el-input__wrapper:hover {
+  border-color: var(--semi-color-danger);
+}
+
+.semi .el-form-item.is-error .el-input__wrapper.is-focus {
+  border-color: var(--semi-color-danger);
+}
+
+/* 错误状态选择器 */
+.semi .el-form-item.is-error .el-select .el-input__wrapper {
+  border-color: var(--semi-color-danger);
+}
+
+/* 错误状态文本域 */
+.semi .el-form-item.is-error .el-textarea__inner {
+  border-color: var(--semi-color-danger);
+}
+
+/* 成功状态 */
+.semi .el-form-item.is-success .el-input__wrapper {
+  border-color: var(--semi-color-success);
+}
+
+/* 帮助文本 */
+.semi .el-form-item__content .el-form-item__help {
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+  line-height: 20px;
+  padding-top: 4px;
+}
+
+/* 行内表单 */
+.semi .el-form--inline .el-form-item {
+  margin-right: 24px;
+}
+
+/* 顶部标签 */
+.semi .el-form--label-top .el-form-item__label {
+  padding-bottom: 8px;
+}
+
+/* 大尺寸 */
+.semi .el-form--large .el-form-item__label {
+  font-size: 14px;
+  line-height: 40px;
+}
+
+.semi .el-form--large .el-form-item {
+  margin-bottom: 28px;
+}
+
+/* 小尺寸 */
+.semi .el-form--small .el-form-item__label {
+  font-size: 12px;
+  line-height: 24px;
+}
+
+.semi .el-form--small .el-form-item {
+  margin-bottom: 20px;
+}

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

@@ -0,0 +1,59 @@
+/**
+ * Element Plus Image - Semi Design 风格
+ */
+
+body.semi .el-image {
+  border-radius: var(--semi-border-radius-small);
+  overflow: hidden;
+}
+
+body.semi .el-image__placeholder {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-image__error {
+  background-color: var(--semi-color-fill-0);
+  color: var(--semi-color-text-3);
+  font-size: var(--semi-font-size-small);
+}
+
+/* 图片预览 */
+body.semi .el-image-viewer__wrapper {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+body.semi .el-image-viewer__btn {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: var(--semi-border-radius-full);
+  color: #fff;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-image-viewer__btn:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+body.semi .el-image-viewer__close {
+  top: 20px;
+  right: 20px;
+  width: 40px;
+  height: 40px;
+  font-size: 24px;
+}
+
+body.semi .el-image-viewer__actions {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 22px;
+  padding: 0 24px;
+}
+
+body.semi .el-image-viewer__actions__inner {
+  color: #fff;
+}
+
+body.semi .el-image-viewer__prev,
+body.semi .el-image-viewer__next {
+  width: 44px;
+  height: 44px;
+  font-size: 24px;
+}

package/dist/element/styles/components/infinite-scroll.css

@@ -0,0 +1,24 @@
+/**
+ * Element Plus InfiniteScroll - Semi Design 风格
+ */
+
+body.semi .el-infinite-scroll__loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  color: var(--semi-color-text-2);
+  font-size: var(--semi-font-size-regular);
+}
+
+body.semi .el-infinite-scroll__loading .el-icon {
+  margin-right: 8px;
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-infinite-scroll__finished {
+  text-align: center;
+  padding: 16px;
+  color: var(--semi-color-text-3);
+  font-size: var(--semi-font-size-small);
+}

package/dist/element/styles/components/input-number.css

@@ -0,0 +1,95 @@
+/**
+ * Element Plus InputNumber - Semi Design 风格
+ */
+
+body.semi .el-input-number {
+  --el-input-number-controls-height: 32px;
+}
+
+body.semi .el-input-number .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none;
+  border: 1px solid transparent;
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+body.semi .el-input-number .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-input-number .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+body.semi .el-input-number .el-input__inner {
+  text-align: center;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-input-number__decrease,
+body.semi .el-input-number__increase {
+  background-color: transparent;
+  color: var(--semi-color-text-2);
+  border: none;
+  width: 32px;
+  font-size: 14px;
+}
+
+body.semi .el-input-number__decrease:hover,
+body.semi .el-input-number__increase:hover {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-input-number__decrease.is-disabled,
+body.semi .el-input-number__increase.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 控制按钮在右侧 */
+body.semi .el-input-number--controls-right .el-input__wrapper {
+  padding-left: 12px;
+  padding-right: 40px;
+}
+
+body.semi .el-input-number--controls-right .el-input-number__decrease,
+body.semi .el-input-number--controls-right .el-input-number__increase {
+  border-left: 1px solid var(--semi-color-border);
+  height: 50%;
+}
+
+body.semi .el-input-number--controls-right .el-input-number__decrease {
+  border-top: 1px solid var(--semi-color-border);
+}
+
+/* 禁用 */
+body.semi .el-input-number.is-disabled .el-input__wrapper {
+  background-color: var(--semi-color-disabled-fill);
+}
+
+body.semi .el-input-number.is-disabled .el-input__inner {
+  color: var(--semi-color-disabled-text);
+}
+
+/* 尺寸 */
+body.semi .el-input-number--small .el-input__wrapper {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+body.semi .el-input-number--small .el-input-number__decrease,
+body.semi .el-input-number--small .el-input-number__increase {
+  width: 28px;
+}
+
+body.semi .el-input-number--large .el-input__wrapper {
+  padding-left: 48px;
+  padding-right: 48px;
+}
+
+body.semi .el-input-number--large .el-input-number__decrease,
+body.semi .el-input-number--large .el-input-number__increase {
+  width: 40px;
+}

package/dist/element/styles/components/input.css

@@ -0,0 +1,170 @@
+/**
+ * Element Plus Input - Semi Design 风格
+ * 覆盖原有 .el-input 样式
+ */
+
+/* 输入框容器 */
+.semi .el-input {
+  --el-input-text-color: var(--semi-color-text-0);
+  --el-input-border-color: transparent;
+  --el-input-hover-border-color: transparent;
+  --el-input-focus-border-color: var(--semi-color-focus-border);
+  --el-input-placeholder-color: var(--semi-color-text-2);
+  --el-input-bg-color: var(--semi-color-fill-0);
+  --el-input-hover-bg-color: var(--semi-color-fill-1);
+  --el-input-icon-color: var(--semi-color-text-2);
+  --el-input-border-radius: var(--semi-border-radius-small);
+}
+
+/* 输入框包装器 */
+.semi .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none;
+  border: 1px solid transparent;
+  padding: 1px 12px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+  box-shadow: none;
+}
+
+.semi .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  box-shadow: none;
+  outline: none;
+}
+
+/* 输入框内容 */
+.semi .el-input__inner {
+  color: var(--semi-color-text-0);
+  font-size: var(--semi-font-size-regular);
+  height: 30px;
+  line-height: 30px;
+}
+
+.semi .el-input__inner::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 前缀后缀 */
+.semi .el-input__prefix,
+.semi .el-input__suffix {
+  color: var(--semi-color-text-2);
+}
+
+.semi .el-input__prefix-inner,
+.semi .el-input__suffix-inner {
+  display: flex;
+  align-items: center;
+}
+
+/* 清除按钮 */
+.semi .el-input__clear {
+  color: var(--semi-color-text-2);
+}
+
+.semi .el-input__clear:hover {
+  color: var(--semi-color-text-1);
+}
+
+/* 密码可见按钮 */
+.semi .el-input__password {
+  color: var(--semi-color-text-2);
+}
+
+.semi .el-input__password:hover {
+  color: var(--semi-color-text-1);
+}
+
+/* 禁用状态 */
+.semi .el-input.is-disabled .el-input__wrapper {
+  background-color: var(--semi-color-disabled-fill);
+  cursor: not-allowed;
+}
+
+.semi .el-input.is-disabled .el-input__inner {
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+/* 尺寸 */
+.semi .el-input--large .el-input__wrapper {
+  padding: 1px 16px;
+}
+
+.semi .el-input--large .el-input__inner {
+  height: 38px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.semi .el-input--small .el-input__wrapper {
+  padding: 1px 8px;
+}
+
+.semi .el-input--small .el-input__inner {
+  height: 22px;
+  line-height: 22px;
+  font-size: 12px;
+}
+
+/* 前置/后置元素 */
+.semi .el-input-group__prepend,
+.semi .el-input-group__append {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-1);
+  padding: 0 12px;
+}
+
+.semi .el-input-group__prepend {
+  border-right: none;
+  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+}
+
+.semi .el-input-group__append {
+  border-left: none;
+  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+}
+
+/* 文本域 */
+.semi .el-textarea__inner {
+  background-color: var(--semi-color-fill-0);
+  border: 1px solid transparent;
+  border-radius: var(--semi-border-radius-small);
+  color: var(--semi-color-text-0);
+  padding: 8px 12px;
+  transition: all var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+.semi .el-textarea__inner:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+.semi .el-textarea__inner:focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+  outline: none;
+}
+
+.semi .el-textarea__inner::placeholder {
+  color: var(--semi-color-text-2);
+}
+
+/* 禁用文本域 */
+.semi .el-textarea.is-disabled .el-textarea__inner {
+  background-color: var(--semi-color-disabled-fill);
+  color: var(--semi-color-disabled-text);
+  cursor: not-allowed;
+}
+
+/* 字数统计 */
+.semi .el-input__count,
+.semi .el-textarea__count {
+  color: var(--semi-color-text-2);
+  font-size: 12px;
+}

package/dist/element/styles/components/link.css

@@ -0,0 +1,73 @@
+/**
+ * Element Plus Link - Semi Design 风格
+ */
+
+body.semi .el-link {
+  font-size: var(--semi-font-size-regular);
+  font-weight: 400;
+  transition: color var(--semi-transition-duration) var(--semi-transition-timing);
+}
+
+body.semi .el-link--default {
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-link--default:hover {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-link--primary {
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-link--primary:hover {
+  color: var(--semi-color-primary-hover);
+}
+
+body.semi .el-link--success {
+  color: var(--semi-color-success);
+}
+
+body.semi .el-link--success:hover {
+  color: var(--semi-color-success-hover);
+}
+
+body.semi .el-link--warning {
+  color: var(--semi-color-warning);
+}
+
+body.semi .el-link--warning:hover {
+  color: var(--semi-color-warning-hover);
+}
+
+body.semi .el-link--danger {
+  color: var(--semi-color-danger);
+}
+
+body.semi .el-link--danger:hover {
+  color: var(--semi-color-danger-hover);
+}
+
+body.semi .el-link--info {
+  color: var(--semi-color-text-2);
+}
+
+body.semi .el-link--info:hover {
+  color: var(--semi-color-text-1);
+}
+
+body.semi .el-link.is-disabled {
+  color: var(--semi-color-disabled-text);
+}
+
+body.semi .el-link.is-underline:hover:after {
+  border-bottom-color: currentColor;
+}
+
+body.semi .el-link .el-icon {
+  margin-right: 4px;
+}
+
+body.semi .el-link [class*="el-icon"] + span {
+  margin-left: 4px;
+}

package/dist/element/styles/components/loading.css

@@ -0,0 +1,50 @@
+/**
+ * Element Plus Loading - Semi Design 风格
+ */
+
+body.semi .el-loading-mask {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+body.semi .el-loading-spinner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+body.semi .el-loading-spinner .circular {
+  width: 32px;
+  height: 32px;
+}
+
+body.semi .el-loading-spinner .path {
+  stroke: var(--semi-color-primary);
+  stroke-width: 3;
+}
+
+body.semi .el-loading-spinner .el-loading-text {
+  color: var(--semi-color-primary);
+  font-size: var(--semi-font-size-regular);
+  margin-top: 8px;
+}
+
+body.semi .el-loading-spinner .el-icon-loading {
+  color: var(--semi-color-primary);
+  font-size: 32px;
+}
+
+/* 小尺寸 */
+body.semi .el-loading-spinner--small .circular {
+  width: 24px;
+  height: 24px;
+}
+
+body.semi .el-loading-spinner--small .el-loading-text {
+  font-size: var(--semi-font-size-small);
+}
+
+/* 全屏 */
+body.semi .el-loading-mask.is-fullscreen {
+  z-index: 2000;
+}

package/dist/element/styles/components/mention.css

@@ -0,0 +1,49 @@
+/**
+ * Element Plus Mention - Semi Design 风格
+ */
+
+body.semi .el-mention {
+  --el-mention-dropdown-shadow: var(--semi-shadow-elevated);
+}
+
+body.semi .el-mention .el-input__wrapper {
+  background-color: var(--semi-color-fill-0);
+  border-radius: var(--semi-border-radius-small);
+  box-shadow: none;
+  border: 1px solid transparent;
+}
+
+body.semi .el-mention .el-input__wrapper:hover {
+  background-color: var(--semi-color-fill-1);
+}
+
+body.semi .el-mention .el-input__wrapper.is-focus {
+  background-color: var(--semi-color-fill-0);
+  border-color: var(--semi-color-focus-border);
+}
+
+/* 下拉面板 */
+body.semi .el-mention__dropdown {
+  border: none;
+  border-radius: var(--semi-border-radius-medium);
+  box-shadow: var(--semi-shadow-elevated);
+  padding: 4px 0;
+}
+
+body.semi .el-mention__option {
+  padding: 8px 16px;
+  color: var(--semi-color-text-0);
+}
+
+body.semi .el-mention__option:hover {
+  background-color: var(--semi-color-fill-0);
+}
+
+body.semi .el-mention__option.is-selected {
+  background-color: var(--semi-color-primary-light-default);
+  color: var(--semi-color-primary);
+}
+
+body.semi .el-mention__loading {
+  color: var(--semi-color-primary);
+}