vent-template/src/design/vent/index.less

@import './color.less';
@import './var.less';
@import './antCss.less';
@import './comment.less';

.vent {
  background-color: #09172c !important;
  // background-color: #031d4c !important; //031d4c
}
/* 按钮 */
.ant-btn-primary {
  border-color: #91e9fe !important;
  background: #275088 !important;
  &:hover,
  &:focus {
    background: #27508899 !important;
    border-color: #91e9fe99 !important;
  }
}

.ant-btn-link {
  color: #00e7ff !important;
  &:hover,
  &:focus {
    background: none !important;
    border: none !important;
  }
  .anticon {
    color: #fff !important;
  }
}

/* 表单 */
.vent-form {
  .ant-form {
    background-color: @vent-transparent !important;
    .ant-form-item-label > label {
      color: @vent-font-color !important;
    }

    .anticon.ant-input-clear-icon,
    .anticon {
      color: #fff !important;
    }
    .ant-select-selector {
      color: #fff;
      background-color: #ffffff00 !important;
    }
    .ant-form-item-control-input-content {
      .ant-input-affix-wrapper,
      .ant-input-number-handler-wrap {
        color: #fff;
        // background-color: #ffffff17 !important;
        border: 1px solid @vent-form-item-boder !important;
      }
      .ant-picker,
      .ant-select-selector {
        width: 100%;
        color: #fff !important;
        // background: #ffffff17 !important;
        border: 1px solid @vent-form-item-boder !important;
      }
    }
    .ant-select-multiple {
      .ant-select-selection-item-content {
        color: #fff !important;
      }
    }
    .ant-input,
    .anticon,
    input,
    .ant-input-number,
    .ant-select-selection-item,
    .ant-input-group-addon,
    .ant-picker,
    .ant-picker-suffix {
      color: #fff !important;
      background: #ffffff00 !important;
      border: none;
      &::placeholder {
        color: #999;
      }
    }
    .ant-input-number {
      width: 100%;
      .ant-input-number-input-wrap {
        border: 1px solid @vent-form-item-boder !important;
      }
    }

    .ant-select-selection-placeholder,
    .ant-input-number-placeholder,
    .ant-picker-placeholder,
    .ant-input-placeholder {
      color: #999 !important;
    }
    .ant-select-arrow,
    .ant-picker-separator {
      color: #fff !important;
    }

    .ant-form-item {
      margin-right: 20px;
    }
    .ant-select-dropdown {
      border-bottom: 1px solid #ececec66;
      background: #fff;
      left: 0px !important;
      // top: 36px !important;
    }
    .ant-upload.ant-upload-select-picture-card,
    .ant-input-affix-wrapper {
      background-color: @vent-transparent !important;
    }
    .input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px @vent-transparent inset !important;
    }
    .ant-radio-button-wrapper {
      background: #999;
    }
    .ant-btn {
      .anticon {
        color: #000 !important;
      }
    }
    .ant-btn-primary {
      .anticon {
        color: #fff !important;
      }
    }
    .ant-btn-link {
      .anticon {
        color: #fff !important;
      }
    }
    .ant-select-dropdown, .ant-select-tree{
      background: #fff0 !important;
    }
    .ant-select-tree{
      // backdrop-filter: blur(2px);
    }
  }
}
.vent-modal {
  .ant-drawer-content {
    background-color: #03114c !important;
  }
}

// .jeecg-basic-table-form-container .ant-form {
//   background-color: @vent-transparent !important;
//   color: @vent-font-color !important;
//   border: 1px solid #ffffff22;

//   .ant-form-item-label > label {
//     color: @vent-font-color !important;
//   }
//   .ant-input-affix-wrapper,
//   .ant-input-number-handler-wrap {
//     color: #fff;
//     background-color: #ffffff17 !important;
//     border: 1px solid @vent-form-item-boder !important;
//   }
//   .ant-picker,
//   .ant-select-selector {
//     color: #fff !important;
//     background: #ffffff17 !important;
//     border: 1px solid @vent-form-item-boder !important;
//   }
//   .anticon,
//   input,
//   .ant-input-number,
//   .ant-select-selection-item,
//   .ant-picker-suffix {
//     color: #fff !important;
//     background: #ffffff00 !important;
//     border: none;
//   }
//   .ant-select-selection-placeholder {
//     color: #b7b7b7 !important;
//   }
//   .ant-select-arrow,
//   .ant-picker-separator {
//     color: #fff !important;
//   }
// }

.jeecg-basic-table {
  .ant-table-wrapper {
    padding: 0 !important;
    .ant-table-tbody {
      .ant-select,
      .ant-input-number,
      .ant-input {
        width: 100%;
      }
    }
  }
}
.jeecg-basic-drawer {
  background: #080a2c11 !important;
  .ant-drawer-content {
    background-color: #03114c99 !important;
    backdrop-filter: blur(20px);
    .ant-drawer-title,
    .ant-drawer-close {
      color: #fff !important;
    }
    .ant-drawer-title {
      .jeecg-basic-title {
        color: #fff !important;
      }
    }
    .ant-descriptions-bordered {
      .ant-descriptions-item-label {
        color: #fff !important;
        background-color: #ffffff22 !important;
      }
      .ant-descriptions-item-content {
        color: #fff !important;
      }
    }
  }

  .ant-drawer-body,
  .ant-drawer-header,
  .jeecg-basic-drawer-footer {
    background: #080a2c11 !important;
    border-color: #ffffff3d !important;
  }
}
.jeecg-tree {
  background-color: @vent-transparent !important;
  .ant-tree {
    background-color: @vent-transparent !important;
    color: @vent-font-color !important;
  }
  .ant-tree-title,
  .ant-tree-node-content-wrapper {
    &:hover {
      background-color: rgba(209, 209, 209, 0.1) !important;
    }
  }
}

.ant-card {
  border: 1px solid #44d3ff70 !important;
  border-radius: 2px !important;
  -webkit-backdrop-filter: blur(8px) !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 20px #44b4ff33 inset;
  background-color: #ffffff11 !important;
  .ant-tree {
    background-color: @vent-transparent !important;
    color: @vent-font-color !important;
  }
  .ant-tree-title,
  .ant-tree-node-content-wrapper {
    &:hover {
      background-color: rgba(209, 209, 209, 0.1) !important;
    }
  }
  .ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected {
    background-color: #009bee;
  }
  .ant-input,
  .ant-input-affix-wrapper {
    border: 1px solid #ececec66;
    background-color: @vent-transparent !important;
  }
  .alert {
    background-color: @vent-table-hover !important;
    border-color: #ffffff22 !important;
    .ant-alert-message {
      color: @vent-font-color !important;
    }
  }
}
.ant-tabs {
  // border: 1px solid #4d7ad855;
  // border-radius: 2px;
  // background-color: @vent-transparent !important;
  // -webkit-backdrop-filter: blur(8px);
  // backdrop-filter: blur(8px);
  // box-shadow: 0 0 10px #5984e055 inset;
  .ant-tabs-nav {
    &::before {
      border-color: #ffffff33 !important;
    }
  }
  .ant-descriptions-bordered {
    .ant-descriptions-item-label {
      color: #fff !important;
      background-color: #ffffff22 !important;
    }
    .ant-descriptions-item-content {
      color: #fff !important;
    }

    .ant-descriptions-row,
    .ant-descriptions-item-label {
      border-color: #ffffff33 !important;
    }
    .ant-descriptions-view {
      border-color: #ffffff11 !important;
      box-shadow: 0 0 5px #5984e033 inset;
    }
  }
}

.jeecg-tree {
  .jeecg-tree-header {
    .jeecg-basic-title {
      color: #fff !important;
    }
    .ant-input-affix-wrapper {
      background-color: @vent-transparent !important;
      border-color: #ffffff33 !important;
    }
  }
}

.device-manager-box {
  margin: 10px 8px;
  height: calc(100% - 30px);
  padding-bottom: 10px;
  // border: 1px solid #447fff55;
  border: 1px solid #44d3ff70;
  border-radius: 2px;
  // background-color: #001d3055;
  -webkit-backdrop-filter: blur(8px);
  // backdrop-filter: blur(8px);
  box-shadow: 0 0 20px #44b4ff33 inset;
  background-color: #ffffff11;
  // background-color: #00b3ff12;
  .ant-table-thead > tr > th {
    color: #fff !important;
    font-weight: 600;
  }
}

/** 表格样式*/
.ant-table-tbody {
  tr.ant-table-row-selected {
    td {
      background: @vent-table-no-hover !important;
    }
  }
  tr > td {
    background-color: @vent-table-no-hover !important;
  }
  & > tr:hover.ant-table-row > td {
    background-color: @vent-table-hover !important;
  }
  .ant-table-cell-row-hover {
    background: @vent-table-hover !important;
  }
}
.jeecg-basic-table-row__striped {
  td {
    background-color: @vent-table-no-hover !important;
  }
}
.ant-table-thead {
  // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
  background-color: #3d9dd45d !important;
  & > tr > th,
  .ant-table-column-title {
    // color: #70f9fc !important;
    color: #fff !important;
    border-color: #91e9fe !important;
    border-left: none !important;
    // border-right: none !important;
    &:last-child {
      border-right: none !important;
    }
  }
}
.ant-table-row-expand-icon {
  background: #fff0 !important;
}

.modal-container {
  min-height: 100px;
  padding: 20px;
  .label {
    margin-right: 15px;
    font-size: 15px;
    font-weight: 600;
    color: #70e0f7;
  }
  .warning-text {
    margin-left: 10px;
    font-size: 16px;
  }
  .input-box {
    margin-top: 20px;
  }
  .startSmoke-select {
    display: flex;
    margin: 15px 12px;
  }
}

input:-internal-autofill-previewed,
input:-internal-autofill-selected {
  // -webkit-text-fill-color: #2a2d33;
  transition: background-color 5000s ease-out 0.5s;
}