visualization-design/src/styles/tdesign.css

/* 字体图标和TDesign 命名冲突 */
.t-message__list div.t-message:before {
  content: none;
}

.t-input {
  font-size: 13px;
  background: none;
  border: 1px solid var(--color-border-input);
  height: 30px;

  &:hover,
  &.t-is-focused {
    border-color: var(--color-primary);
  }

  &.t-is-error {
    box-shadow: none !important;
    border-color: var(--color-error) !important;
  }

  &.t-input--prefix > .t-input__prefix,
  .t-input--suffix > .t-input__suffix {
    font-size: 12px;
    color: var(--color-desc);
  }

  .t-input__inner::-webkit-input-placeholder {
    /* color: transparent; */
  }
}

.t-select {
  .t-input.t-is-readonly {
    background: none;
  }
}

.t-select > .t-tag:before {
  content: none;
}

.t-input--focused,
.t-textarea__inner:focus {
  box-shadow: none;
}

.t-select {
  &.t-is-active:not(.t-is-disabled):not(.t-no-border) {
    box-shadow: none;
  }
}

.t-select-option {
  &.button {
    background: none;
    color: var(--color);
  }

  & > * {
    width: 100%;
  }

  &.t-is-selected {
    background: none;
    color: var(--color);
  }
}

.t-color-picker__format-mode-select .t-select,
.t-color-picker__format-mode-select .t-input {
  background-color: var(--color-background-popup);
  border-color: var(--color-border-input);

  .t-fake-arrow {
    color: var(--color);
  }
}

.t-color-picker__format--item .input-group__item .t-input {
  background-color: var(--color-background-popup);
  border-color: var(--color-border-input);
  &:hover {
    border-color: var(--color-primary);
  }
}

.t-color-picker__select-options > .t-popup__content {
  box-shadow: none;
  border: 1px solid var(--color-border-input);
}

.t-dropdown {
  border-color: var(--color-border-popup);
}

.t-dropdown__menu-column {
  padding: 4px 0;
}

.t-dropdown__menu {
  padding: 4px;
  background-color: var(--color-background-popup);
  border: none;

  .t-dropdown__item {
    padding: 0;
    background-color: transparent;

    .t-dropdown__item-text {
      display: block;
      padding: 0 16px;
      line-height: 32px;
      border-radius: 2px;

      &:hover {
        background-color: var(--color-background-popup-hover);
      }

      a {
        display: block;
        text-decoration: none;
        color: var(--color);

        label {
          font-size: 10px;
          background-color: #ff400030;
          color: var(--color-bland);
          padding: 0 6px;
          margin-left: 4px;
          border-radius: 2px;
        }
      }

      .t-input__wrap {
        width: calc(100% + 32px);
        margin-left: -16px;
        .t-input {
          background: none;
          border-color: var(--color-border-input);
          &:hover {
            border-color: var(--color-primary);
          }
        }
      }
    }

    &.t-dropdown__item--disabled {
      .t-dropdown__item-text {
        cursor: default;
        background-color: var(--color-background-popup) !important;
        color: var(--color-desc);
      }
    }
  }

  .t-divider {
    margin: 4px 0;
    width: 100%;
    border-top: 1px solid var(--color-border-input);
  }

  &::-webkit-scrollbar {
    width: 6px !important;
  }
}

.t-popup__content {
  padding: 0 !important;
  margin-top: 0 !important;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-popup);
  background-color: var(--color-background-popup);

  .t-color-picker__format {
    align-items: center;
  }

  ul {
    padding: 16px 4px;
    font-size: 12px;
    li {
      line-height: 30px;
      list-style: none;
      cursor: pointer;
      &:hover {
        color: var(--color-primary);
      }
    }
  }

  &::-webkit-scrollbar {
    width: 6px !important;
  }
}

.t-tooltip {
  .t-popup__content {
    font-size: 12px;
    padding: 2px 8px !important;
  }
}

.t-date-range-picker {
  width: 240px;
}

.t-table {
  font-size: 13px;

  .t-table__pagination {
    padding: 16px 0;

    svg {
      color: var(--color);
    }
  }
}

.t-button--variant-outline {
  background-color: transparent !important;
}

.input-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 4px 16px;

  .t-input {
    padding-left: 32px;
    outline: none;
    border: none;
    background: var(--color-background-input);
    z-index: 0;
    height: 28px;
    input {
      color: var(--color);
      &::placeholder {
        color: var(--color-gray);
      }
    }
  }

  .btn {
    position: absolute;
    left: 28px;
    height: 32px;
    line-height: 30px;
    z-index: 1;
  }
}

.t-tag {
  display: inline-block;
}

.t-tabs__nav-container {
  &.t-is-top::after {
    background-color: var(--color-background-input);
  }
}

.t-tabs__nav-item-wrapper > div {
  display: none;
}

.t-tabs__nav-item {
  color: var(--color);

  &:not(.t-is-disabled):not(.t-is-active):hover .t-tabs__nav-item-wrapper {
    background: none;
    color: var(--color-primary);
  }
}

.t-color-picker__trigger {
  height: 30px;

  .t-input {
    height: 30px;
    border: 1px solid var(--color-border-input);
    padding: 0;
    background: none;

    & > .t-input__prefix {
      margin: 8px;
      width: 16px;
      height: 16px;
      border: 1px solid var(--color-border-input);
      border-radius: 2px;

      span {
        width: 16px;
        height: 16px;
        border: 1px solid var(--color-border-input);
      }
    }
  }

  &.w-full {
    .t-input--auto-width {
      min-width: 100%;
      max-width: 100%;
      .t-input .t-input__inner {
        text-overflow: ellipsis;
        margin-right: 10px;
      }
    }
  }

  &.simple {
    width: 16px;
    height: 16px;

    * .t-input--auto-width {
      min-width: 14px;
      width: 14px;
    }

    .t-input {
      height: 16px;
      border: none;
      padding: 0;
      background: none;

      & > .t-input__prefix {
        margin: 0;
        width: 14px;
        height: 14px;
        border: 1px solid var(--color-desc);
        border-radius: 3px;

        &:hover {
          border-color: var(--color-primary);
        }

        span {
          border: none;
          height: 12.4px;
          cursor: pointer;
        }
      }

      input {
        display: none;
      }
    }
  }
}

.t-radio-group {
  .t-radio {
    &:last-child {
      margin-right: 0;
    }
  }
  .t-radio__input {
    background: none;
  }

  .t-radio-button {
    border-color: var(--color-border-input);
    &:last-child {
      border-right-color: var(--color-border-input);
    }

    &.t-is-checked {
      border-color: var(--color-border-input);
      background-color: var(--color-border-input);
      color: var(--td-text-color-primary) !important;
    }
  }
}

.rectangle.t-radio-group.t-radio-group--filled {
  background: none;

  .t-radio-group__bg-block {
    display: none;
  }

  label {
    width: 30px !important;
    margin-right: 12px;
    padding: 0;
    background-color: var(--color-background-popup);
    border-radius: 4px;
    &::before {
      content: none;
    }

    .t-radio-button__label {
      width: 100%;
      height: 100%;

      svg {
        width: 100%;
        height: 100%;
        padding: 4px;
      }
    }

    &.t-is-checked {
      background-color: var(--color-primary);
    }
  }
}

.t-message {
  color: #000000e6;
  background-color: #ffffff;
  padding: 10px 16px;
}

.t-popup__arrow {
  &::before {
    background-color: var(--color-background-popup);
  }
}

.t-popup[data-popper-placement^='top'] .t-popup__arrow::before {
  top: -3px;
  border-top-left-radius: 0;
}

.t-button--variant-base {
  color: var(--color);

  &.t-button--theme-primary {
    color: #ffffff !important;
  }
}

.t-color-picker__trigger--default__color {
  background-color: transparent;
  background-image: linear-gradient(
      45deg,
      #c5c5c5 25%,
      transparent 0,
      transparent 75%,
      #c5c5c5 0,
      #c5c5c5
    ),
    linear-gradient(
      45deg,
      #c5c5c5 25%,
      transparent 0,
      transparent 75%,
      #c5c5c5 0,
      #c5c5c5
    );
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}

.t-divider--horizontal {
  margin: 0;
}

.t-dialog {
  padding: 16px 20px;
  border-color: var(--color-dialog-border);

  .t-dialog__header {
    font-size: 14px;
    .t-icon {
      width: 18px;
    }
  }

  .t-dialog__body {
    overflow: initial;

    & > .body {
      width: calc(100% + 40px);
      height: 380px;
      margin-left: -20px;
      padding: 0 20px;
      overflow: auto;

      &.t-tabs {
        padding: 0;
        & > div {
          padding: 0 20px;
        }

        .t-tabs__content {
          height: 340px;
          overflow: auto;
        }
      }
    }
  }

  .t-dialog__footer {
    padding: 0;
  }

  .t-dialog__close {
    margin-right: -6px;
    &:hover {
      background: none;
      color: var(--color-primary);
    }
  }

  .t-table__empty {
    color: var(--color-gray);
  }
}

.t-checkbox__label {
  font-size: 12px;
}

.t-is-active {
  .t-tree__label {
    background: none;
  }
}

.context-menu {
  height: fit-content !important;
  position: absolute;
  border-radius: 4px;
  background-color: var(--color-background-popup);
  user-select: none;
  z-index: 100;

  .t-menu {
    padding: 8px 4px;

    .t-menu__item {
      color: var(--color);
      line-height: 32px;
      padding: 0 16px;
      margin: 0;

      &:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
        background-color: var(--color-background-popup-hover);
      }

      &.t-is-disabled {
        color: var(--color-gray);
      }

      .t-menu__content {
        width: 100%;
      }

      & > div {
        display: none;
      }
    }

    .t-divider {
      margin: 4px 0;
      width: 100%;
      border-top: 1px solid var(--color-border-input);
    }
  }
}

.t-menu__popup {
  ul {
    padding: 8px 4px;
  }
  .t-menu__item {
    line-height: 32px;
    height: 32px;
    margin: 0;

    & > div {
      display: none;
    }

    .t-menu__content {
      color: var(--color);
      padding: 4px 0;
    }

    &:hover:not(.t-is-active):not(.t-is-opened):not(.t-is-disabled) {
      background-color: var(--color-background-popup-hover);
    }

    &.t-is-disabled {
      color: var(--color-gray);
    }
  }
}

.t-drawer__header {
  min-height: 40px;
  font-size: 14px;
}