AnalysisSystemForRadionuclide_vue/src/style.less

// 重置样式

@font-face {
  font-family: MicrogrammaD-MediExte;
  src: url(~@/assets/fonts/MicrogrammaDMedExt.ttf);
}

@font-face {
  font-family: BookmanOldStyle;
  src: url(~@/assets/fonts/BOOKOS.ttf);
}

body {
  color: #fff;
}

.ant-layout {
  background: url(~@/assets/images/content/bg.jpg) center center no-repeat;
  background-size: cover;
  height: 100vh;
}

@modalBg: #022024;

// 卡片样式
.ant-card {
  background-color: transparent;
  .ant-card-body {
    padding: 0;
  }
}

// 表格样式
.ant-table {
  color: #ade6ee;
  &-thead {
    tr {
      th {
        background-color: #126b82 !important;
        color: #fff;
        padding: 6px 8px !important;
        border-bottom: none;
      }
    }
  }
  &-tbody {
    tr {
      background-color: #06282a;
      &:nth-child(2n) {
        background-color: #08373a;
      }
      td {
        padding: 10px 8px !important;
        border-bottom: none;
      }
      &:hover {
        td {
          background-color: transparent !important;
        }
      }
      &.ant-table-row-selected {
        td {
          background-color: #0d4e5c !important;
        }
      }
    }
  }
  &-placeholder {
    background-color: transparent;
    border-top: none;
    border-bottom: none;
  }
  &-selected {
    background-color: 0d4e5c;
  }
}

// 表格下的分页器
.ant-table-pagination {
  float: none !important;
  text-align: center;
}

// 表单样式
@antFormSelector: .ant-form;
@{antFormSelector} {
  &-item {
    &-label {
      > label {
        color: #5b9cba;
      }
    }
  }
  &-horizontal {
    @{antFormSelector} {
      &-item {
        display: flex;
      }
    }
  }
}

@formInputBgColor: #03353f;
@formInputBorderColor: #0b8c82;
// 输入框样式
.ant-input {
  background-color: @formInputBgColor !important;
  border-color: @formInputBorderColor !important;
  border-radius: 0;
  color: #fff;
  &::placeholder {
    color: #fff;
  }
  &:focus {
    box-shadow: none;
  }
}

// 单选样式
.ant-radio {
  &-wrapper {
    color: #fff;
  }
}

// 下拉框样式
.ant-select {
  color: #fff !important;
  &-selection {
    background-color: @formInputBgColor !important;
    border-color: @formInputBorderColor !important;
    border-radius: 0;
    box-shadow: none !important;
    &__placeholder {
      color: #fff !important;
    }

    &--multiple {
      .ant-select-selection__choice {
        background: transparent;
        color: #fff;
        border: 1px solid #0b8c82;
        &__remove {
          color: #fff !important;
        }
      }
    }
  }

  &-dropdown {
    background-color: transparent;
    padding-top: 7px;

    @borderColor: #0da397;
    &-content {
      border: 1px solid @borderColor;
      overflow: visible !important;
      &::before {
        position: absolute;
        top: -6px;
        left: 20px;
        content: '';
        width: 12px;
        height: 12px;
        border: 1px solid #0da397;
        background: #03353f;
        transform: rotate(45deg) skew(14deg, 14deg);
      }
    }
    &-menu {
      background: #03353f;
      padding: 0;
      position: relative;
      &-item {
        color: #fff;
        font-family: Arial;
        border: 0;
        background-color: transparent !important;
        padding: 4px 14px;
        &:hover {
          background-color: #055565 !important;
        }
        &-selected {
          color: #0cebc9;
          font-weight: normal;
        }
        &-disabled {
          color: #476d74 !important;
          &:hover {
            background-color: transparent !important;
          }
        }
      }
    }

    &--multiple {
      // 多选
      color: #000;
      .ant-select-dropdown {
        &-menu-item {
          padding-left: 35px;
          .anticon-check {
            width: 16px;
            height: 16px;
            line-height: 18px;
            left: 13px;
            border: 1px solid #0a544e !important;
            color: transparent !important;
            background-color: #03353f;
          }
          &-selected {
            .anticon-check {
              background: #00e9fe;
              border-color: #00e9fe;
              color: #000 !important;
            }
          }
        }
      }
    }
  }

  // 下拉框打开时的样式
  &-open {
    .ant-select {
      &-selection {
        background-color: #055565 !important;
      }
    }
  }
}

// 下拉菜单
.ant-dropdown {
  &-menu {
    background: #03353f;
    padding: 0;
    position: relative;
    &-item {
      color: #fff;
      font-family: Arial;
      border: 0;
      background-color: transparent !important;
      padding: 4px 14px;
      &:hover {
        background-color: #055565 !important;
      }
      &-selected {
        color: #0cebc9;
        font-weight: normal;
      }
      &-disabled {
        color: #476d74 !important;
        &:hover {
          background-color: transparent !important;
        }
      }
    }
  }
}

// 树形下拉样式
.ant-select-tree {
  color: #fff !important;
  .ant-select-tree-node-content-wrapper {
    color: #fff !important;
  }
}

// 树形结构
.ant-tree {
}

// 按钮
.ant-btn {
  border-radius: 0;
  font-family: Arial;
  span {
    text-shadow: 0px 1px 0px #000;
    font-size: 16px;
  }

  &-success {
    // 自定义warn样式
    background-color: #08a7cf !important;
    color: #fff !important;
    border-color: #08a7cf !important;
    &:hover {
      background-color: #08a7cf !important;
    }
  }

  &-warn {
    // 自定义warn样式
    background-color: #b98326 !important;
    color: #fff !important;
    border-color: #b98326 !important;
    &:hover {
      background-color: #b98326 !important;
    }
  }
}

// 空状态
.ant-empty {
  background-color: transparent;
  color: #fff;
}

// 分页器样式
.ant-pagination {
  &,
  &-item a {
    color: #ade6ee;
  }

  &-item {
    width: 26px;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 50%;
    &-active {
      background-color: #00bded;
      a {
        color: #fff !important;
      }
    }
  }

  .ant-pagination-item-link {
    color: #00bded;
  }
  &-disabled {
    .ant-pagination-item-link {
      color: #9ca2a6 !important;
    }
  }

  .ant-select {
    &-selection {
      border: none;
      box-shadow: none;
      background-color: transparent !important;
      color: #ade6ee;
      &-selected-value {
        height: 26px;
        line-height: 26px;
      }
      .ant-select-arrow {
        display: none;
      }
    }
    .ant-select-selection__rendered::after {
      content: '';
      margin-left: 18px;
      border: 6px solid transparent;
      border-top-width: 8px;
      border-bottom-width: 8px;
      border-top-color: #00bded;
      visibility: visible;
      transform: translateY(8px);
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 50% 25%;
    }
    &-open {
      .ant-select-selection__rendered::after {
        transform: translateY(6px) rotate(180deg);
      }
    }
  }

  &-options {
    &-quick-jumper {
      input {
        background-color: #011927;
        border: 1px solid #00cbfe;
        width: 70px !important;
        border-radius: 0;
        color: #ade6ee;
        text-align: center;
      }
    }
  }
}

// 弹窗样式
.ant-modal {
  &-content {
    border-radius: 0;
    border: 1px solid #0c6a66;
    background-color: @modalBg;
  }
  &-header {
    background-color: #0c817b;
    padding: 0 20px;
    border-radius: 0;
    border-bottom: none;
  }
  &-title {
    font-family: MicrogrammaD-MediExte;
    font-weight: bold;
    color: #fff;
    height: 40px;
    line-height: 40px;
  }
  &-close {
    color: #fff !important;
    &-x {
      width: 40px;
      height: 40px;
      line-height: 40px;
    }
  }
  &-body {
    padding-bottom: 0;
  }
  &-footer {
    border-top: none;
    text-align: center;
    padding-bottom: 22px;
  }
}

// 确认弹窗样式
.ant-modal-confirm {
  &-title,
  &-content {
    color: #fff !important;
  }
}

// 通知样式
.ant-message {
  &-notice {
    &-content {
      background-color: @modalBg;
    }
  }
}

// 抽屉
.ant-drawer {
  &-content {
    background-color: @modalBg;
  }
  &-body {
    > div {
      background-color: transparent !important;
      border: none !important;
    }
  }
}

// 警告提示
.ant-alert {
  &-info {
    background-color: @modalBg;
  }
}

// 滚动条
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: #011b1f;
}

::-webkit-scrollbar-thumb {
  background-color: #007f9a;
}