hsq-pro/src/design/vent/index.less

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

.vent {
  background-color: #09172c !important;
}


/* 按钮 */
.@{ventSpace}-btn-primary {
  border-color: #91e9fe !important;
  background: #275088 !important;
  &:hover,
  &:focus {
    background: #27508899 !important;
    border-color: #91e9fe99 !important;
  }
}
.@{ventSpace}-btn-dangerous{
  color: #fff !important;
  border-color: #ed4c4c !important;
  background: #ed4c4c !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045) !important;
  &:hover, &:focus {
    background: #ee3636 !important;
    border-color: #ee3636 !important;
  }
}

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

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

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

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

    .@{ventSpace}-form-item {
      margin-right: 20px;
    }

    .@{ventSpace}-upload.@{ventSpace}-upload-select-picture-card,
    .@{ventSpace}-input-affix-wrapper {
      background-color: @vent-transparent !important;
    }
    .@{ventSpace}-radio-button-wrapper {
      background: #999;
    }
    .@{ventSpace}-btn {
      .anticon {
        color: #000 !important;
      }
    }
    .@{ventSpace}-btn-primary {
      .anticon {
        color: #fff !important;
      }
    }
    .@{ventSpace}-btn-link {
      .anticon {
        color: #fff !important;
      }
    }
    /** 下拉框 */
    .@{ventSpace}-select-dropdown {
      // border-bottom: 1px solid #ececec66;
      // background: transparent !important;
      border: 1px solid #ececec66;
      background: #004362 !important;
      left: 0px !important;
      backdrop-filter: blur(50px);

      .@{ventSpace}-select-item {
        color: #fff !important;
      }

      .@{ventSpace}-select-item-option-selected,
      .@{ventSpace}-select-item-option-active {
        background-color: #00678b66 !important;
      }
      .@{ventSpace}-select-item:hover {
        background-color: #008fc366 !important;
      }
    }
    .@{ventSpace}-picker-panel{
      border: 1px solid #ececec66;
      // background: #004362 !important;
      color: #fff !important;
    }

    .@{ventSpace}-select-tree {
      background: transparent !important;
      backdrop-filter: blur(50px) !important;
      color: #fff !important;
    }

    .@{ventSpace}-select-tree {
      & .@{ventSpace}-select-tree-node-content-wrapper.@{ventSpace}-select-tree-node-selected {
        background-color: #00678b66 !important;
      }

      .@{ventSpace}-select-tree-node-content-wrapper:hover {
        background-color: #008fc366 !important;
      }
    }
  }
}




.vent-modal {
  .@{ventSpace}-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 {
  .@{ventSpace}-table-wrapper {
    padding: 0 !important;
    .@{ventSpace}-table-tbody {
      .@{ventSpace}-select,
      .@{ventSpace}-input-number,
      .@{ventSpace}-input {
        width: 100%;
      }
    }
  }
}
.jeecg-basic-drawer {
  background: #080a2c11 !important;
  .@{ventSpace}-drawer-content {
    background-color: #03114c99 !important;
    backdrop-filter: blur(20px);
    .@{ventSpace}-drawer-title,
    .@{ventSpace}-drawer-close {
      color: #fff !important;
    }
    .@{ventSpace}-drawer-title {
      .jeecg-basic-title {
        color: #fff !important;
      }
    }
    .@{ventSpace}-descriptions-bordered {
      .@{ventSpace}-descriptions-item-label {
        color: #fff !important;
        background-color: #ffffff22 !important;
      }
      .@{ventSpace}-descriptions-item-content {
        color: #fff !important;
      }
    }
  }

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

.@{ventSpace}-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;
  .@{ventSpace}-tree {
    background-color: @vent-transparent !important;
    color: @vent-font-color !important;
  }
  .@{ventSpace}-tree-title,
  .@{ventSpace}-tree-node-content-wrapper {
    &:hover {
      background-color: rgba(209, 209, 209, 0.1) !important;
    }
  }
  .@{ventSpace}-tree .@{ventSpace}-tree-node-content-wrapper.@{ventSpace}-tree-node-selected {
    background-color: #009bee;
  }
  .@{ventSpace}-input,
  .@{ventSpace}-input-affix-wrapper {
    border: 1px solid #ececec66;
    background-color: @vent-transparent !important;
  }
  .alert {
    background-color: @vent-table-hover !important;
    border-color: #ffffff22 !important;
    .@{ventSpace}-alert-message {
      color: @vent-font-color !important;
    }
  }
}
.@{ventSpace}-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;
  .@{ventSpace}-tabs-nav {
    &::before {
      border-color: #ffffff33 !important;
    }
  }
  .@{ventSpace}-descriptions-bordered {
    .@{ventSpace}-descriptions-item-label {
      color: #fff !important;
      background-color: #ffffff22 !important;
    }
    .@{ventSpace}-descriptions-item-content {
      color: #fff !important;
    }

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

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

.device-manager-box {
  margin: 10px 8px;
  height: calc(100% - 72px);
  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;
  .@{ventSpace}-table-thead > tr > th {
    color: #fff !important;
    font-weight: 600;
  }
}

/** 表格样式*/
.@{ventSpace}-table-tbody {
  tr.@{ventSpace}-table-row-selected {
    td {
      background: @vent-table-no-hover !important;
    }
  }
  tr > td {
    background-color: @vent-table-no-hover !important;
  }
  & > tr:hover.@{ventSpace}-table-row > td {
    background-color: @vent-table-hover !important;
  }
  .@{ventSpace}-table-cell-row-hover {
    background: @vent-table-hover !important;
  }
}
.jeecg-basic-table-row__striped {
  td {
    background-color: @vent-table-no-hover !important;
  }
}
.@{ventSpace}-table-thead {
  // background: linear-gradient(#003f77 0%, #004a86aa 10%) !important; //#003f77, #0a134c
  background-color: #3d9dd45d !important;
  & > tr > th,
  .@{ventSpace}-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;
    }
  }
}
.@{ventSpace}-table-row-expand-icon {
  background: #fff0 !important;
}
.@{ventSpace}-table-placeholder{
  background: transparent !important;
}

.@{ventSpace}-empty {
  color: #fff !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;
  }
}

/** 摄像头 */
.video-wrapper{
  height: 100%;
}