hy-dispatch-ui-v3 0.1.0 → 0.1.2

package/es/style/element/index.scss

@@ -0,0 +1,932 @@
+@use './element.scss';
+
+:root {
+  --hy-el-fill-color-light: rgb(var(--hy-background-2));
+  --hy-el-fill-color-lighter: rgb(var(--hy-background-4));
+  --hy-el-fill-color-blank: rgb(var(--hy-background-2));
+  --hy-el-color-info: rgb(var(--hy-info));
+  --hy-el-border: var(--hy-el-border-width) var(--hy-el-border-style)
+    rgb(var(--hy-border));
+  --hy-el-disabled-border-color: rgb(var(--hy-border));
+  --hy-el-bg-color: rgb(var(--hy-background));
+  --hy-el-text-color-secondary: rgb(var(--hy-auxiliary));
+  --hy-el-text-color-regular: rgb(var(--hy-auxiliary));
+  --hy-el-border-color-light: rgb(var(--hy-border));
+  --hy-el-border-color-lighter: rgb(var(--hy-border));
+  --hy-el-color-primary: rgb(var(--hy-theme));
+  --hy-el-text-color-placeholder: rgb(var(--hy-info));
+  --hy-el-text-color-primary: rgb(var(--hy-auxiliary));
+  --hy-el-color-danger: rgb(var(--hy-danger));
+}
+
+// 表格
+.hy-el-table {
+  --hy-el-table-border-color: rgb(var(--hy-border), 1);
+  --hy-el-table-border: 1px solid rgb(var(--hy-border), 1);
+  --hy-el-table-text-color: rgb(var(--hy-main));
+  --hy-el-table-header-text-color: rgb(var(--hy-main));
+  --hy-el-table-row-hover-bg-color: rgb(var(--hy-background-2-50));
+  --hy-el-table-current-row-bg-color: rgb(var(--hy-background-2-50));
+  --hy-el-table-header-bg-color: rgb(var(--hy-background-2));
+  --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
+  --hy-el-table-bg-color: rgb(var(--hy-background));
+  --hy-el-table-tr-bg-color: rgb(var(--hy-background));
+  --hy-el-table-expanded-cell-bg-color: rgb(var(--hy-background));
+  --hy-el-table-fixed-left-column: inset 10px 0 10px -10px
+    rgba(var(--hy-background-3), 1);
+  --hy-el-table-fixed-right-column: inset -10px 0 10px -10px
+    rgba(var(--hy-background-3), 1);
+  --hy-el-table-index: var(--hy-el-index-normal);
+  position: relative;
+  overflow: hidden;
+  box-sizing: border-box;
+  height: -moz-fit-content;
+  height: fit-content;
+  width: 100%;
+  max-width: 100%;
+  background-color: var(--hy-el-table-bg-color);
+  font-size: var(--hy-el-font-size-base);
+  color: var(--hy-el-table-text-color);
+}
+
+.hy-el-table__expand-icon {
+  color: rgb(var(--hy-main));
+  font-size: 12px;
+  line-height: 12px;
+  font-weight: 700;
+  width: min(23px, 100%);
+  height: 23px;
+}
+
+.hy-el-table__expand-icon > .hy-el-icon {
+  font-size: 12px;
+}
+
+.hy-el-table tr:hover td:first-child {
+  box-shadow:
+    inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table tr:hover td:last-child {
+  box-shadow:
+    inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table tr:hover td:not(:first-child):not(:last-child) {
+  box-shadow:
+    inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+// 虚拟表格
+.hy-el-table-v2 {
+  --hy-el-table-border-color: rgb(var(--hy-border), 1);
+  --hy-el-table-border: 1px solid rgb(var(--hy-border), 1);
+  --hy-el-table-text-color: rgb(var(--hy-main));
+  --hy-el-table-header-text-color: rgb(var(--hy-main));
+  --hy-el-table-row-hover-bg-color: rgb(var(--hy-background-2-50));
+  --hy-el-table-current-row-bg-color: rgb(var(--hy-background-2-50));
+  --hy-el-table-header-bg-color: rgb(var(--hy-background-2));
+  --hy-el-table-fixed-box-shadow: var(--hy-el-box-shadow-light);
+  --hy-el-table-bg-color: rgb(var(--hy-background));
+  --hy-el-table-tr-bg-color: rgb(var(--hy-background));
+  --hy-el-table-expanded-cell-bg-color: rgb(var(--hy-background));
+  --hy-el-table-fixed-left-column: inset 10px 0 10px -10px
+    rgba(var(--hy-background-3), 1);
+  --hy-el-table-fixed-right-column: inset -10px 0 10px -10px
+    rgba(var(--hy-background-3), 1);
+  --hy-el-table-index: var(--hy-el-index-normal);
+  font-size: var(--hy-el-font-size-base);
+}
+
+.hy-el-table-v2__table
+  .hy-el-table-v2__row:hover
+  .hy-el-table-v2__row-cell:first-child {
+  box-shadow:
+    inset 10px 0 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table-v2__table
+  .hy-el-table-v2__row:hover
+  .hy-el-table-v2__row-cell:last-child {
+  box-shadow:
+    inset -10px 0 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table-v2__table
+  .hy-el-table-v2__row:hover
+  .hy-el-table-v2__row-cell:not(:first-child):not(:last-child) {
+  box-shadow:
+    inset 0 10px 10px -10px rgba(var(--hy-theme), 0.2),
+    inset 0 -10px 10px -10px rgba(var(--hy-theme), 0.2);
+}
+
+.hy-el-table-v2__right {
+  display: flex;
+  flex-direction: column-reverse;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  background-color: var(--hy-el-bg-color);
+  right: 0;
+  box-shadow: -2px 0 4px 0 rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-table-v2__left {
+  display: flex;
+  flex-direction: column-reverse;
+  position: absolute;
+  overflow: hidden;
+  top: 0;
+  background-color: var(--hy-el-bg-color);
+  left: 0;
+  box-shadow: 2px 0 4px 0 rgba(var(--hy-background-3), 1);
+}
+
+.hy-el-empty__image svg {
+  color: rgb(var(--hy-auxiliary));
+  fill: currentColor;
+  width: 100%;
+  height: 100%;
+  vertical-align: top;
+}
+
+// input输入框
+.hy-el-input {
+  --hy-el-input-text-color: rgb(var(--hy-main));
+  --hy-el-input-border: rgb(var(--hy-border));
+  --hy-el-input-hover-border: rgb(var(--hy-theme));
+  --hy-el-input-focus-border: rgb(var(--hy-theme));
+  --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
+  --hy-el-input-border-color: rgb(var(--hy-border));
+  --hy-el-input-border-radius: var(--hy-el-border-radius-base);
+  --hy-el-input-bg-color: rgba(var(--hy-background-2));
+  --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
+  --hy-el-input-placeholder-color: rgb(var(--hy-auxiliary));
+  --hy-el-input-hover-border-color: rgb(var(--hy-theme));
+  --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
+  --hy-el-input-focus-border-color: rgb(var(--hy-theme));
+  --hy-el-input-width: 100%;
+  --hy-el-input-height: var(--hy-el-component-size);
+  position: relative;
+  font-size: var(--hy-el-font-size-base);
+  display: inline-flex;
+  width: var(--hy-el-input-width);
+  line-height: var(--hy-el-input-height);
+  box-sizing: border-box;
+  vertical-align: middle;
+}
+
+.hy-el-input-group__prepend {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.hy-el-input-group__append {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.hy-el-input.is-disabled .hy-el-input__wrapper {
+  background-color: rgba(var(--hy-background-2));
+  // background-color: var(--hy-el-input-bg-color);
+  cursor: not-allowed;
+  box-shadow: 0 0 0 1px rgb(var(--hy-border)) inset;
+}
+
+.hy-el-textarea {
+  --hy-el-input-text-color: rgb(var(--hy-main));
+  --hy-el-input-border: rgb(var(--hy-border));
+  --hy-el-input-hover-border: rgb(var(--hy-theme));
+  --hy-el-input-focus-border: rgb(var(--hy-theme));
+  --hy-el-input-transparent-border: 0 0 0 1px transparent inset;
+  --hy-el-input-border-color: rgb(var(--hy-border));
+  --hy-el-input-border-radius: var(--hy-el-border-radius-base);
+  --hy-el-input-bg-color: rgba(var(--hy-background-2));
+  --hy-el-input-icon-color: var(--hy-el-text-color-placeholder);
+  --hy-el-input-placeholder-color: rgb(var(--hy-auxiliary));
+  --hy-el-input-hover-border-color: rgb(var(--hy-theme));
+  --hy-el-input-clear-hover-color: var(--hy-el-text-color-secondary);
+  --hy-el-input-focus-border-color: rgb(var(--hy-theme));
+  --hy-el-input-width: 100%;
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  font-size: var(--hy-el-font-size-base);
+}
+
+.hy-el-input-group__append,
+.hy-el-input-group__prepend {
+  background-color: var(--hy-el-fill-color-light);
+  color: rgb(var(--hy-auxiliary));
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  border-radius: var(--hy-el-input-border-radius);
+  padding: 0 20px;
+  white-space: nowrap;
+}
+
+// 日期选择器
+.hy-el-popper.hy-el-tooltip.hy-el-picker__popper {
+  --hy-el-border-color-light: rgb(var(--hy-auxiliary));
+}
+
+.hy-el-popper {
+  --hy-el-popper-border-radius: var(--hy-el-popover-border-radius, 4px);
+  --hy-el-popper-bg-color-light: rgb(var(--hy-background-2));
+  --hy-el-popper-bg-color-dark: rgb(var(--hy-background-2));
+  position: absolute;
+  border-radius: var(--hy-el-popper-border-radius);
+  padding: 5px 11px;
+  z-index: 2000;
+  font-size: 12px;
+  line-height: 20px;
+  min-width: 10px;
+  overflow-wrap: break-word;
+  word-break: normal;
+  visibility: visible;
+}
+
+.hy-el-date-picker {
+  --hy-el-datepicker-text-color: rgb(var(--hy-auxiliary));
+  --hy-el-datepicker-off-text-color: rgb(var(--hy-info));
+  --hy-el-datepicker-header-text-color: rgb(var(--hy-auxiliary));
+  --hy-el-datepicker-icon-color: rgb(var(--hy-auxiliary));
+  --hy-el-datepicker-border-color: var(--hy-el-disabled-border-color);
+  --hy-el-datepicker-inner-border-color: var(--hy-el-border-color-light);
+  --hy-el-datepicker-inrange-bg-color: rgb(var(--hy-background-2));
+  --hy-el-datepicker-inrange-hover-bg-color: rgb(var(--hy-background-3));
+  --hy-el-datepicker-active-color: rgb(var(--hy-background-3));
+  --hy-el-datepicker-hover-text-color: rgb(var(--hy-theme));
+  --hy-el-datepicker-bg-color: rgb(var(--hy-background-2));
+  --hy-el-fill-color-blank: rgb(var(--hy-background-2));
+}
+
+.hy-el-date-table td.selected .hy-el-date-table-cell__text {
+  background-color: var(--hy-el-datepicker-active-color);
+  color: rgb(var(--hy-theme));
+}
+
+.hy-el-button.is-plain {
+  --hy-el-button-hover-text-color: rgb(var(--hy-theme));
+  --hy-el-button-hover-bg-color: rgb(var(--hy-background-2));
+  --hy-el-button-hover-border-color: rgb(var(--hy-theme));
+}
+
+.hy-el-button {
+  --hy-el-button-font-weight: var(--hy-el-font-weight-primary);
+  --hy-el-button-border-color: rgb(var(--hy-border));
+  --hy-el-button-bg-color: var(--hy-el-fill-color-blank);
+  --hy-el-button-text-color: var(--hy-el-text-color-regular);
+  --hy-el-button-disabled-text-color: var(--hy-el-disabled-text-color);
+  --hy-el-button-disabled-bg-color: var(--hy-el-fill-color-blank);
+  --hy-el-button-disabled-border-color: var(--hy-el-border-color-light);
+  --hy-el-button-divide-border-color: rgba(255, 255, 255, 0.5);
+  --hy-el-button-hover-text-color: var(--hy-el-color-primary);
+  --hy-el-button-hover-bg-color: var(--hy-el-color-primary-light-9);
+  --hy-el-button-hover-border-color: var(--hy-el-color-primary-light-7);
+  --hy-el-button-active-text-color: var(--hy-el-button-hover-text-color);
+  --hy-el-button-active-border-color: var(--hy-el-color-primary);
+  --hy-el-button-active-bg-color: var(--hy-el-button-hover-bg-color);
+  --hy-el-button-outline-color: var(--hy-el-color-primary-light-5);
+  --hy-el-button-hover-link-text-color: var(--hy-el-text-color-secondary);
+  --hy-el-button-active-color: var(--hy-el-text-color-primary);
+}
+
+.hy-el-date-table.is-week-mode
+  .hy-el-date-table__row.current
+  .hy-el-date-table-cell {
+  background-color: rgb(var(--hy-background-3));
+}
+
+.hy-el-date-table td.start-date .hy-el-date-table-cell__text,
+.hy-el-date-table td.end-date .hy-el-date-table-cell__text {
+  background-color: rgb(var(--hy-background-2));
+}
+
+.hy-el-date-table td.start-date .hy-el-date-table-cell,
+.hy-el-date-table td.end-date .hy-el-date-table-cell {
+  color: rgb(var(--hy-theme));
+}
+
+.hy-el-year-table td.current:not(.disabled) .hy-el-date-table-cell__text {
+  color: rgb(var(--hy-theme));
+  background-color: var(--hy-el-datepicker-active-color);
+}
+
+.hy-el-month-table td.current:not(.disabled) .hy-el-date-table-cell__text {
+  color: rgb(var(--hy-theme));
+  background-color: var(--hy-el-datepicker-active-color);
+}
+
+.hy-el-date-table td.current:not(.disabled) .hy-el-date-table-cell__text {
+  color: rgb(var(--hy-theme));
+  background-color: var(--hy-el-datepicker-active-color);
+}
+
+.hy-el-date-range-picker {
+  --hy-el-datepicker-text-color: rgb(var(--hy-auxiliary));
+  --hy-el-datepicker-off-text-color: rgb(var(--hy-info));
+  --hy-el-datepicker-header-text-color: rgb(var(--hy-auxiliary));
+  --hy-el-datepicker-icon-color: rgb(var(--hy-auxiliary));
+  --hy-el-datepicker-border-color: rgb(var(--hy-border));
+  --hy-el-datepicker-inner-border-color: rgb(var(--hy-border));
+  --hy-el-datepicker-inrange-bg-color: rgb(var(--hy-background-2));
+  --hy-el-datepicker-inrange-hover-bg-color: rgb(var(--hy-background-3));
+  --hy-el-datepicker-active-color: rgb(var(--hy-background-3));
+  --hy-el-datepicker-hover-text-color: rgb(var(--hy-theme));
+  --hy-el-datepicker-bg-color: rgb(var(--hy-background-2));
+}
+
+.hy-el-date-table td.in-range .hy-el-date-table-cell {
+  background-color: rgb(var(--hy-background-3));
+}
+
+.hy-el-date-editor.hy-el-input__wrapper {
+  box-shadow: 0 0 0 1px rgb(var(--hy-border)) inset;
+}
+
+.hy-el-date-editor {
+  --hy-el-input-icon-color: rgb(var(--hy-auxiliary));
+  --hy-el-input-placeholder-color: rgb(var(--hy-auxiliary));
+  --hy-el-input-hover-border: rgb(var(--hy-theme));
+  --hy-el-input-hover-border-color: rgb(var(--hy-theme));
+  --hy-el-text-color-placeholder: rgb(var(--hy-auxiliary));
+  --hy-el-text-color-regular: rgb(var(--hy-main));
+}
+
+.hy-el-date-editor .hy-el-range__icon {
+  color: rgb(var(--hy-auxiliary));
+}
+
+.hy-el-date-picker__editor-wrap .hy-el-input__wrapper {
+  background-color: rgb(var(--hy-background-2));
+}
+
+.hy-el-scrollbar__wrap
+  .hy-el-time-spinner__list
+  .hy-el-time-spinner__item:hover {
+  background-color: rgb(var(--hy-background-3));
+}
+
+.hy-el-button.is-text:not(.is-disabled):hover {
+  background-color: rgb(var(--hy-background-3));
+}
+
+// 单选框
+.hy-el-radio__inner {
+  background-color: rgb(var(--hy-background));
+}
+
+.hy-el-radio__input.is-checked .hy-el-radio__inner::after {
+  background-color: rgb(var(--hy-theme));
+}
+
+.hy-el-radio__input.is-checked .hy-el-radio__inner {
+  border-color: var(--hy-el-color-primary);
+  background: rgb(var(--hy-background));
+}
+
+// 多选框
+.hy-el-checkbox__inner {
+  background-color: rgb(var(--hy-background));
+}
+
+.hy-el-checkbox__input.is-checked .hy-el-checkbox__inner,
+.hy-el-checkbox__input.is-indeterminate .hy-el-checkbox__inner {
+  background: rgb(var(--hy-theme), 0.5);
+  box-shadow: 0 0 4px 0 rgb(var(--hy-theme));
+  border-color: rgb(var(--hy-theme));
+}
+
+.hy-el-checkbox__input.is-disabled .hy-el-checkbox__inner {
+  background-color: rgb(var(--hy-background));
+  border-color: rgb(var(--hy-info));
+  cursor: not-allowed;
+}
+
+.hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner {
+  background-color: rgb(var(--hy-background));
+  border-color: rgb(var(--hy-info));
+  box-shadow: 0 0 4px 0 rgb(var(--hy-info));
+}
+
+.hy-el-checkbox__input.is-disabled.is-checked .hy-el-checkbox__inner::after {
+  border-color: rgb(var(--hy-info));
+}
+
+.hy-el-checkbox-button.is-checked .hy-el-checkbox-button__inner {
+  color: var(--hy-el-checkbox-button-checked-text-color);
+  // background: linear-gradient(180deg, rgb(var(--hy-auxiliary), .5), rgb(var(--hy-auxiliary), .8) 53%, rgb(var(--hy-theme), .9));
+  background: rgb(var(--hy-theme), 0.5);
+  // border: 1px solid rgb(var(--hy-theme));
+  box-shadow: inset 0px 0px 0px 1px rgb(var(--hy-theme)) !important;
+  position: relative;
+  z-index: 99;
+  // &::after {
+  //   content: '';
+  //   position: absolute;
+  //   bottom: 0px;
+  //   left: 0px;
+  //   width: 100%;
+  //   height: 2px;
+  //   background: linear-gradient( 90deg, rgba(var(--hy-theme), 0) 0%, rgba(var(--hy-theme), 1) 49.31%, rgba(var(--hy-theme), 0) 100%);
+  // }
+}
+
+// 选择框
+.hy-el-popper.hy-el-tooltip.hy-el-select__popper {
+  --hy-el-border-color-light: rgb(var(--hy-auxiliary));
+}
+
+.hy-el-select__wrapper {
+  box-shadow: 0 0 0 1px rgb(var(--hy-border)) inset;
+}
+
+.hy-el-select__wrapper.is-hovering:not(.is-focused) {
+  box-shadow: 0 0 0 1px rgb(var(--hy-theme)) inset;
+}
+
+.hy-el-select__placeholder.is-transparent {
+  color: rgb(var(--hy-auxiliary));
+}
+
+.hy-el-select__placeholder {
+  color: rgb(var(--hy-main));
+}
+
+.hy-el-select__caret {
+  color: rgb(var(--hy-main));
+}
+
+.hy-el-select-dropdown__item.is-selected {
+  background-color: rgb(var(--hy-background-2));
+}
+
+.hy-el-select-dropdown__item.is-hovering:hover {
+  background-color: rgb(var(--hy-background-3));
+  color: rgb(var(--hy-theme));
+}
+
+.hy-el-select__wrapper.is-disabled {
+  box-shadow: 0 0 0 1px rgb(var(--hy-info)) inset !important;
+}
+
+.hy-el-tag.hy-el-tag--info {
+  --hy-el-tag-bg-color: rgb(var(--hy-background-2));
+  --hy-el-tag-border-color: rgb(var(--hy-border));
+  --hy-el-tag-hover-color: var(--hy-el-color-info);
+}
+
+.hy-el-select__selection .hy-el-tag {
+  border-color: rgb(var(--hy-border));
+}
+
+.hy-el-tag.hy-el-tag--info {
+  --hy-el-tag-text-color: rgb(var(--hy-main));
+}
+
+.hy-el-tag .hy-el-tag__close {
+  background-color: rgb(var(--hy-danger-2)) !important;
+}
+
+// 消息提示框
+.hy-el-popper,
+.hy-el-tooltip {
+  --hy-el-border-color-light: rgb(var(--hy-theme));
+}
+
+.hy-el-popper.is-dark {
+  --hy-el-border-color-light: rgb(var(--hy-theme));
+  --hy-el-text-color-primary: rgb(var(--hy-theme));
+  color: rgb(var(--hy-main));
+  background: var(--hy-el-popper-bg-color-dark);
+  border: 1px solid var(--hy-el-text-color-primary);
+}
+
+.hy-el-popover.hy-el-popper {
+  color: rgb(var(--hy-main));
+}
+
+// 分页器
+.hy-el-pagination.is-background .btn-prev {
+  border-radius: 50%;
+  background: rgb(var(--hy-background-2));
+  color: rgb(var(--hy-main));
+
+  &:hover {
+    color: rgb(var(--hy-theme));
+  }
+}
+
+.hy-el-pagination.is-background .btn-prev:disabled {
+  border-radius: 50%;
+
+  &:hover {
+    color: rgb(var(--hy-main));
+  }
+}
+
+.hy-el-pagination.is-background .btn-next,
+.hy-el-pagination.is-background .hy-el-pager li {
+  border-radius: 50%;
+  background: rgb(var(--hy-background-2));
+  color: rgb(var(--hy-main));
+
+  &:hover {
+    color: rgb(var(--hy-theme));
+  }
+}
+
+.hy-el-pagination.is-background .hy-el-pager li {
+  border-radius: 50%;
+  background: rgb(var(--hy-background-2));
+  color: rgb(var(--hy-main));
+
+  &:hover {
+    color: rgb(var(--hy-theme));
+  }
+}
+
+.hy-el-pagination.is-background .btn-prev.is-active,
+.hy-el-pagination.is-background .btn-next.is-active,
+.hy-el-pagination.is-background .hy-el-pager li.is-active {
+  background: rgb(var(--hy-theme), 0.5);
+  box-shadow: 0 0 6px 0 rgb(var(--hy-theme));
+  border: 1px solid rgb(var(--hy-theme));
+  color: rgb(var(--hy-main));
+}
+
+.hy-el-pagination__total {
+  color: rgb(var(--hy-main));
+}
+
+.hy-el-pagination__jump {
+  color: rgb(var(--hy-main));
+}
+
+.hy-el-pagination.is-background .btn-prev:disabled,
+.hy-el-pagination.is-background .btn-prev.is-disabled,
+.hy-el-pagination.is-background .btn-next:disabled,
+.hy-el-pagination.is-background .btn-next.is-disabled,
+.hy-el-pagination.is-background .hy-el-pager li:disabled,
+.hy-el-pagination.is-background .hy-el-pager li.is-disabled {
+  &:hover {
+    color: var(--hy-el-text-color-placeholder);
+  }
+}
+
+// 下拉框
+.hy-el-dropdown__popper.hy-el-popper {
+  --hy-el-border-color-light: rgb(var(--hy-border));
+}
+
+.hy-el-dropdown-menu {
+  background-color: rgb(var(--hy-background-2));
+
+  .hy-el-dropdown-menu__item {
+    &:hover {
+      background-color: rgb(var(--hy-background-3));
+    }
+  }
+}
+
+.hy-el-dialog {
+  --hy-el-dialog-bg-color: var(--hy-el-bg-color);
+  --hy-el-dialog-box-shadow: 0 0 12px 0 rgba(var(--hy-theme));
+  box-shadow: 0 0 12px 0 transparent;
+  background-color: rgb(var(--hy-background), 0.7);
+  backdrop-filter: blur(2px);
+  border: 1px solid rgb(var(--hy-theme));
+  padding: 0px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    width: 24px;
+    height: 24px;
+    border-left: 1px solid;
+    border-top: 1px solid;
+    border-top-left-radius: 4px;
+    border-image: radial-gradient(
+        circle at 16.27% 15.07%,
+        rgb(var(--hy-theme)) 0%,
+        rgba(56, 189, 227, 0) 100%
+      )
+      1;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    width: 24px;
+    height: 24px;
+    border-right: 1px solid;
+    border-top: 1px solid;
+    border-top-right-radius: 4px;
+    border-image: radial-gradient(
+        circle at 83.73% 15.07%,
+        rgb(var(--hy-theme)) 0%,
+        rgba(56, 189, 227, 0) 100%
+      )
+      1;
+    pointer-events: none;
+  }
+}
+
+.hy-el-dialog__body {
+  position: relative;
+  color: rgb(var(--hy-main));
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 2px;
+    bottom: 2px;
+    width: 24px;
+    height: 24px;
+    border-left: 1px solid;
+    border-bottom: 1px solid;
+    border-bottom-left-radius: 4px;
+    border-image: radial-gradient(
+        circle at 16.27% 84.93%,
+        rgb(var(--hy-theme)) 0%,
+        rgba(56, 189, 227, 0) 100%
+      )
+      1;
+    pointer-events: none;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    right: 2px;
+    bottom: 2px;
+    width: 24px;
+    height: 24px;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-bottom-right-radius: 4px;
+    border-image: radial-gradient(
+        circle at 83.73% 84.93%,
+        rgb(var(--hy-theme)) 0%,
+        rgba(56, 189, 227, 0) 100%
+      )
+      1;
+    pointer-events: none;
+  }
+}
+
+.hy-el-dialog__header {
+  padding: 0px !important;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 2px;
+    transform: translateX(-50%);
+    width: 36px;
+    height: 1px;
+    background: linear-gradient(
+      90deg,
+      rgba(45, 242, 255, 0) 0%,
+      rgb(var(--hy-theme)) 10%,
+      rgb(var(--hy-theme)) 90%,
+      rgba(45, 242, 255, 0) 100%
+    );
+    pointer-events: none;
+  }
+}
+
+.hy-el-dialog__title {
+  color: rgb(var(--hy-main));
+}
+
+.hy-el-dialog__headerbtn .hy-el-dialog__close {
+  color: rgb(var(--hy-main));
+}
+
+.hy-el-drawer__header {
+  color: rgb(var(--hy-main));
+}
+
+//  .hy-el-drawer {
+//   --hy-el-drawer-bg-color: rgb(var(--hy-background-4));
+//  }
+// 选项卡
+.hy-el-tabs {
+  border-radius: 6px 6px 0 0;
+  overflow: hidden;
+}
+
+.hy-el-tabs__nav-scroll {
+  background-color: rgb(var(--hy-background-2));
+}
+
+.hy-el-tabs__nav-wrap::after {
+  background-color: rgb(var(--hy-background));
+}
+
+.hy-el-tabs__active-bar {
+  background: transparent;
+}
+
+.hy-el-tabs .hy-el-tabs__item {
+  border-radius: 6px 6px 0 0;
+  border: 1px solid rgb(var(--hy-background-2));
+  padding: 0 20px !important;
+
+  &:hover {
+    border-color: rgb(var(--hy-theme), 0.5);
+    box-shadow: inset 0 0 6px 0 rgb(var(--hy-theme), 0.5);
+  }
+}
+
+.hy-el-tabs__header {
+  margin: 0;
+}
+
+.hy-el-tabs__header .hy-el-tabs__item {
+  color: rgb(var(--hy-auxiliary));
+  font-size: 14px;
+
+  &:hover {
+    color: rgb(var(--hy-main));
+  }
+}
+
+.hy-el-tabs__content {
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+  border: 1px solid rgb(var(--hy-background-2));
+}
+
+.hy-el-tabs__item.is-active {
+  color: rgb(var(--hy-main));
+  background-color: rgb(var(--hy-background-3));
+  font-weight: 700;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px;
+    bottom: 0;
+    left: 0px;
+    border-radius: 999px;
+    background: linear-gradient(
+      90deg,
+      rgba(45, 242, 255, 0) 0%,
+      rgb(var(--hy-theme)) 50%,
+      rgba(45, 242, 255, 0) 100%
+    );
+    pointer-events: none;
+  }
+}
+
+.childrenTabs {
+  .hy-el-tabs {
+    border-radius: 6px 6px 0 0;
+    overflow: hidden;
+
+    .hy-el-tabs__nav-next,
+    .hy-el-tabs__nav-prev {
+      i::before {
+        top: 2px !important;
+      }
+    }
+
+    .hy-el-tabs__header {
+      margin: 0;
+
+      .hy-el-tabs__active-bar {
+        transform: translateX(0px);
+        height: 2px;
+        border-bottom: 3px solid;
+        border-image: linear-gradient(
+            50deg,
+            rgba(0, 216, 247, 0) 0%,
+            rgb(var(--hy-theme)) 50%,
+            rgba(0, 216, 247, 0)
+          )
+          2 2 2 2;
+        background: transparent;
+      }
+    }
+
+    .hy-el-tabs__content {
+      border-radius: 0 0 8px 8px;
+      overflow: hidden;
+      border: 0px solid rgb(var(--hy-border));
+    }
+
+    .hy-el-tabs__item {
+      border-radius: 6px 6px 0px 0px;
+      border: 0px solid transparent;
+      padding: 0 20px !important;
+    }
+
+    .hy-el-tabs__item:hover {
+      color: #fff;
+      box-shadow: transparent 0px 1px 3px 0px inset;
+      border-bottom: 3px solid;
+      border-image: linear-gradient(
+          50deg,
+          rgba(0, 216, 247, 0) 0%,
+          rgb(var(--hy-theme)) 40%,
+          rgba(0, 216, 247, 0) 80%
+        )
+        2 2 2 2;
+    }
+
+    .is-active {
+      color: #fff !important;
+      background: transparent;
+      box-shadow: transparent 0px 1px 3px 0px inset;
+      border-bottom: 3px solid;
+      border-image: linear-gradient(
+          50deg,
+          rgba(0, 216, 247, 0) 0%,
+          rgb(var(--hy-theme)) 40%,
+          rgba(0, 216, 247, 0) 80%
+        )
+        2 2 2 2;
+
+      &::after {
+        content: '';
+        position: absolute;
+        width: 100%;
+        height: 0px;
+        bottom: 0;
+        left: 0px;
+      }
+    }
+
+    .hy-el-tabs__nav-wrap.is-scrollable,
+    .hy-el-tabs__nav-scroll {
+      background: transparent;
+    }
+  }
+}
+
+// 级联选择器
+.hy-el-cascader__dropdown {
+  --hy-el-border-color-light: rgb(var(--hy-border));
+}
+
+.hy-el-cascader-panel {
+  --hy-el-cascader-menu-border: 1px solid rgb(var(--hy-border));
+}
+
+// 表单
+.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left
+  > .hy-el-form-item__label-wrap
+  > .hy-el-form-item__label:before {
+  display: none;
+}
+
+.hy-el-form-item.is-required:not(.is-no-asterisk).asterisk-left
+  > .hy-el-form-item__label:before {
+  display: none;
+}
+
+.hy-el-switch {
+  --hy-el-switch-on-color: rgb(var(--hy-success-2));
+  --hy-el-switch-off-color: rgb(var(--hy-background-3));
+}
+
+.hy-el-switch__core {
+  border: 1px solid var(--hy-el-switch-border-color, rgb(var(--hy-border)));
+}
+
+.hy-el-switch.is-checked .hy-el-switch__core {
+  border-color: var(--hy-el-switch-border-color, rgb(var(--hy-auxiliary)));
+
+  .hy-el-switch__inner-wrapper {
+    color: rgb(var(--hy-main));
+  }
+}
+
+.hy-el-switch__core .hy-el-switch__inner-wrapper {
+  color: rgb(var(--hy-auxiliary));
+}