vue-web-frame/src/assets/styles/el-override/el-input.less

@picker-bg-color: fade(#121d1c, 95);

body {
  .el-input__inner {
    background: fade(@gray, 20);
    color: @gray-l;
  }

  .el-input {
    &.is-disabled .el-input__inner {
      background-color: fade(@gray-l, 20);
      border-color: @gray;
      color: @gray;
      cursor: not-allowed;
    }

    .el-input__inner,.el-input__inner:hover{
      border-color: fade(@gray-l, 20);

      &::placeholder {
        text-align: left;
        color: fade(@gray-l, 20);
      }
    }


    &.is-in-pagination .el-input__inner[type="number"] {
      width: 48px;
    }

    .el-input__inner[type="number"] {
      width: 200px;

      &::-webkit-textfield-decoration-container {
        appearance: none;
      }

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        appearance: none;
      }
    }
  }

  // 数字组件
  .el-input-number {
    &.is-controls-right {
      .el-input-number__increase {
        border-bottom: 1px solid @gray;
      }

      .el-input-number__decrease,
      .el-input-number__increase {
        line-height: 15px;
        color: @gray-l;
        background: fade(@gray, 40);
        border-left: 1px solid @gray;
      }
    }
  }

  // 日期组件
  .el-date-editor {
    &.is-active,
    &.is-active:hover,
    &.is-focus .el-input__inner {
      border-color: @green;
    }

    // el datetimerange Start
    &.el-date-editor--datetimerange ,&.el-date-editor--daterange{
      border: 1px solid fade(@gray, 20);
      height: 33px;
      padding: 0 8px;
      width: 369px;

      .el-range-separator {
        color: @gray-l;
        line-height: 33px;
      }

      .el-range-input {
        flex-basis: 145px;
        line-height: 33px;
        background: transparent;
        color: @gray-l;
        &::placeholder {
          text-align: center;
          color: @gray-l;
        }
      }
    }
    // el datetimerange End
  }

  // 单选框
  .el-radio {
    color: @gray-l;

    &.is-checked {
      .el-radio__inner {
        background: @green;
        border-color: @green;
      }

      .el-radio__label {
        color: @green;
      }
    }

    &.is-bordered.is-checked {
      border-color: @green;
    }

    &:focus:not(.is-focus):not(:active):not(.is-disabled) .el-radio__inner {
      box-shadow: 0 0 2px 2px @green;
    }
  }

  // 单选框组
  .el-radio-group {
    height: 33px;
    & > .el-radio {
      line-height: 33px;
    }
  }

  .el-checkbox {
    height: 33px;
    line-height: 33px;
    color: @gray-l;

    &.is-bordered {
      height: 33px;
      line-height: 33px;
      padding: 0px 20px;
      border-color: @gray;

      &.is-checked {
        border-color: @green;
      }
    }

    .el-checkbox__inner {
      background: fade(@gray, 20);
      border-color: fade(@gray, 40);
    }

    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: @green;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: @green;
      border-color: @green;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: @green;
    }
  }

  // 树组件
  .el-tree {
    color: @gray-l;
    background: fade(@gray, 20);

    .el-checkbox__inner {
      background: transparent;
      border-color: @gray;
    }

    .el-tree-node:focus > .el-tree-node__content {
      background: transparent;
    }

    .el-checkbox__input.is-disabled .el-checkbox__inner {
      background: @gray;
      border-color: @gray;
    }

    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
      background: transparent;
      color: @green;
    }

    .el-tree-node__content:hover,
    .el-upload-list__item:hover {
      background: transparent;
      color: @green;
    }

    .el-checkbox__inner:hover {
      border-color: @green;
    }

    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: @green;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background: @green;
      border-color: @green;
    }
  }

  // Cascader 级联选择器
  .el-cascader {
    line-height: 30px;
    .el-cascader__tags {
      .el-tag {
        color: white;
        background-color: fade(@green, 50);

        .el-icon-close {
          background-color: fade(@green, 50);
        }
      }
    }

    .el-input__suffix {
      right: 0px;
    }

  }

  .el-select {
    .el-input.is-focus .el-input__inner {
      border-color: @green;
    }
    .el-input__inner:focus {
      border-color: @green;
    }
  }

  .el-popper {
    &.el-cascader__dropdown[role="tooltip"] {
      background: @picker-bg-color;
      border-color: @picker-bg-color;

      .el-cascader-menu {
        border-color: @gray;
      }

      .el-cascader-node:not(.is-disabled):focus,
      .el-cascader-node:not(.is-disabled):hover {
        background: fade(@green, 20);
        color: @green;
      }

      .el-cascader-node.in-active-path,
      .el-cascader-node.is-active,
      .el-cascader-node.is-selectable.in-checked-path {
        color: @green;
      }
    }

    &.el-select__popper[role="tooltip"] {
      border-color: @picker-bg-color;
      background: @picker-bg-color;

      .el-cascader-menu {
        border-color: @gray;
      }

      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        background: fade(@green, 20);
        color: @green;
      }

      .el-select-dropdown__item.selected {
        color: @green;
      }
    }
  }
}

.el-picker__popper.el-popper[role="tooltip"] {
  border-color: @picker-bg-color !important;
  background: @picker-bg-color !important;
}

.el-picker-panel {
  // el datetimerange  picker Start
  &.el-date-range-picker {
    color: @gray-l;
    background: transparent;

    .el-date-range-picker__time-header {
      border-color: @gray;

      .el-icon-arrow-right {
        color: @gray-l;
      }

      .el-input__inner {
        background: fade(@gray, 20);
        color: @gray-l;
        border-color: @gray;
      }

      .el-date-range-picker__time-picker-wrap {
        .el-time-panel {
          background-color: @picker-bg-color;

          .el-time-spinner__item.active:not(.disabled) {
            color: @green;
          }
          .el-time-spinner__item:hover:not(.disabled):not(.active) {
            background: transparent;
            color: @green;
          }
        }

        .el-time-panel__btn.confirm {
          color: @green;
        }

        .el-time-panel__btn.cancel {
          color: @gray;
        }
      }
    }

    .el-date-range-picker__content {
      border-color: @gray;

      .el-date-table {
        th {
          color: @gray-l;
        }

        td {
          &.available:hover {
            color: @green;
          }

          &.in-range div,
          &.in-range div:hover {
            background: fade(@gray, 40);
          }

          &.end-date span,
          &.start-date span {
            background: @green;
          }

          &.today {
            span {
              color: @green;
            }

            &.end-date span,
            &.start-date span {
              color: @white;
            }
          }

          &.next-month,
          &.prev-month {
            color: @gray;
          }
        }
      }
    }
  }
  // el datetimerange  picker End

  .el-picker-panel__body {
    border-color: @gray;
  }

  .el-picker-panel__footer {
    background: transparent;
    border-color: @gray;

    .el-button--text {
      color: @gray;
    }

    .el-button.is-plain {
      background: transparent;
      border-color: @green;
      color: @green;
    }
  }
  .el-time-panel__btn.confirm {
    color: @green;
  }
  
  .el-time-panel__btn.cancel {
    color: @gray;
  }
}

.el-popper__arrow::before {
  background: fade(#121d1c, 95) !important;
  border: 1px solid fade(#121d1c, 95) !important;
}