// 重置样式
@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件

@modalBg: #022024;
@formInputBgColor: #03353f;
@formInputBorderColor: #0b8c82;

@primary-color: #1397a3;
@link-color: #1397a3;
@border-radius-base: 4px;
@text-color: #fff;
@btn-default-bg: #b98326;
@btn-default-border: #b98326;

@radio-button-bg: transparent;
@radio-button-checked-bg: transparent;
@radio-button-color: @btn-default-color;

@modal-footer-border-color-split: @formInputBorderColor;

@disabled-color: rgba(255, 255, 255, 0.25);
@background-color-base: darken(@primary-color, 20);
@border-color-base: darken(@primary-color, 20);

@text-color: #fff;

@component-background: @modalBg;
@heading-color: #fff;

@input-bg: @formInputBgColor;
@input-border-color: @formInputBorderColor;

@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;
  font-family: Arial;
}

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

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

// 表格样式
@table-border-radius-base: 0;
@table-padding-vertical-sm: 2px;
@table-padding-vertical: 6px;
@table-padding-horizontal: 8px;  
@table-row-hover-bg: #0e505f;

.ant-table {
  color: #ade6ee;
  font-size: 16px;
  border: 1px solid rgba(65, 111, 127, 0.5);

  &-thead {
    > tr {
      th {
        background-color: #126b82 !important;
        color: #fff;
        border-bottom: none;
      }
    }
  }
  &-tbody {
    tr {
      background-color: #06282a;
      &:nth-child(2n) {
        background-color: #08373a;
      }

      td {
        padding: 10px 8px !important;
        border-bottom: none;
      }

      &.ant-table-row-selected {
        td {
          background-color: #0d4e5c !important;
        }
      }
    }
  }
  &-placeholder {
    background-color: @modalBg;
    border-top: none;
    border-bottom: none;
  }
  &-selected {
    background-color: 0d4e5c;
  }

  &-row-expand-icon {
    background-color: transparent;
    border-color: @formInputBorderColor;
    color: @formInputBorderColor;
  }

  &-small {
    font-size: 14px;

    .ant-table {
      &-tbody {
        tr td {
          padding-top: 6px !important;
          padding-bottom: 6px !important;
        }
      }

      &-placeholder {
        .ant-empty-image {
          height: 60px;
        }

        .ant-empty-description {
          font-size: 14px;
        }
      }
    }
  }
}

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

// 表单样式
@antFormSelector: .ant-form;
@{antFormSelector} {
  &-item {
    &-label {
      > label {
        color: #5b9cba;
      }
    }
    &-children {
      display: inline-block;
      width: 100%;
    }
    &-required::before {
      display: none !important;
    }
  }
  &-horizontal {
    @{antFormSelector} {
      &-item {
        display: flex;
      }
    }
  }
}

// 日期选择
.ant-calendar {
  border-color: @formInputBorderColor;
  border-radius: 0;

  &,
  &-time-picker-inner {
    background-color: @modalBg;
  }

  &-picker {
    width: 100%;
    &-container {
      padding-top: 2px;
    }
    &-clear {
      background-color: @formInputBgColor;
      color: #00e9fe !important;
    }
  }

  &-input {
    background-color: transparent;
    &-wrap {
      border-color: @formInputBorderColor;
      height: 32px;
    }
  }

  &-header,
  &-footer {
    border-color: @formInputBgColor;
  }

  &-year-select,
  &-month-select,
  &-day-select {
    color: #fff !important;
  }

  &-time-picker {
    &-select {
      li {
        &:hover {
          background-color: @primary-color !important;
        }
      }
      &-option-selected {
        background-color: @primary-color !important;
        color: #fff !important;
      }
    }
  }

  &-month {
    &-panel {
      background-color: @modalBg;
      &-header {
        border-bottom: 1px solid @formInputBorderColor;
      }
      &-year-select-content {
        color: #fff;
      }
      &-month {
        &:hover {
          color: #fff !important;
          background-color: @primary-color;
        }
      }
    }
  }

  &-date {
    &:hover {
      background-color: @primary-color;
      color: #fff;
    }
  }

  &-selected-day {
    .ant-calendar-date {
      background-color: @primary-color;
    }
  }
  &-today {
    .ant-calendar-date {
      color: #fff;
    }
  }
}

// 日历
.ant-fullcalendar {
  border-spacing: 0;
  &-column-header {
    background-color: #126b82;
    border-left: 1px solid #126b82 !important;
    padding: 0 !important;
    line-height: 34px;
    &-inner {
      text-align: center;
    }
  }

  &-content {
    margin-top: 10px;
    height: 98px !important;
    &::-webkit-scrollbar {
      width: 4px !important;
    }
  }

  &-date {
    margin: 0 !important;
    height: 159px !important;
    border-top: none !important;
  }

  &-value {
    font-size: 24px;
    font-family: Arial;
    color: #ade6ee !important;
  }

  &-last-month-cell,
  &-next-month-btn-day {
    .ant-fullcalendar-value {
      color: rgba(173, 230, 238, 0.1) !important;
    }
  }

  &-calendar-body {
    padding: 0 !important;
  }

  &-cell {
    border-top: 1px solid #25454e !important;
    border-left: 1px solid #25454e !important;
    &:last-child {
      border-right: 1px solid #25454e !important;
    }
  }

  &-table {
    background-color: #06282a !important;
  }

  &-tbody {
    border-bottom: 1px solid #25454e;
  }

  &-selected-day &-date,
  &-date:hover {
    background-color: #072f32 !important;
  }
}

// 时间选择器
@time-picker-selected-bg: @primary-color;
@item-hover-bg: @primary-color;
.ant-time-picker {
  width: 100%;

  &-input {
    border-radius: 0;

    &::placeholder {
      color: #fff;
    }
  }

  &-clear,
  &-clock-icon {
    color: #01b6e3 !important;
  }

  &-panel {
    &-input {
      background-color: transparent;
    }

    &-inner {
      background-color: @modalBg;
      border: 1px solid @formInputBorderColor;
      border-radius: 0;
    }

    &-select li:focus {
      color: #fff;
    }
  }
}

// 输入框样式
.ant-input {
  border-radius: 0;
  color: #fff;
  &::placeholder {
    color: #fff;
  }
  &:focus {
    box-shadow: none;
  }
  &-number {
    background-color: transparent;
  }
  &-group {
    &-addon {
      background-color: transparent;
    }
  }
  &-clear-icon {
    color: #00e9fe !important;
  }
  &:focus {
    box-shadow: none !important;
  }
  &:disabled {
    color: #fff;
  }

  &-search-icon {
    color: #fff;
  }
}

// 数字输入框
@input-number-handler-active-bg: #06404c;
@input-number-handler-hover-bg: #06404c;
@input-number-handler-bg: #06404c;
@input-number-handler-border-color: transparent;

.ant-input-number {
  border-radius: 0;
  border: 1px solid #0b8c82;
  &-handler {
    height: 50% !important;
    &:hover {
      height: 50% !important;
    }

    .anticon {
      display: none !important;
    }

    // 数组输入框右侧的上下箭头
    &::after {
      content: '';
      display: inline-block;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-left-width: 4px;
      border-right-width: 4px;
      border-bottom-color: #4b859e;
      position: absolute;
      bottom: 2px;
      right: 50%;
      transform: translateX(4px);
    }

    &-down {
      border-top: none;
      &::after {
        transform: translateX(4px) rotate(180deg);
        top: 2px;
      }
    }
  }
}

input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

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

.ant-upload {
  &-select-picture-card {
    background-color: transparent !important;
  }
}

@checkboxSelector: .ant-checkbox;
@{checkboxSelector} {
  &-inner {
    background-color: #03353f;
    border-radius: 0;
    border-color: #0a544e;
  }
  &-checked {
    @{checkboxSelector} {
      &-inner {
        background-color: #00e9fe;
        &::after {
          border-color: #000 !important;
        }
      }
    }
  }
}

// 下拉框样式
@select-dropdown-bg: #03353f;
.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 {
    padding-top: 7px;
    background-color: transparent;

    @borderColor: #0da397;
    &:not(.ant-select-tree-dropdown) {
      .ant-select-dropdown-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);
        }
      }

      &.ant-select-dropdown-placement-topLeft {
        padding-top: 0;
        padding-bottom: 7px;

        .ant-select-dropdown-content {
          &::before {
            top: auto;
            bottom: -6px;
          }
        }
      }
    }

    &-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;
      }
    }
  }

  &-clear-icon {
    color: #00e9fe !important;
    background-color: #03353f !important;
  }
  &-open {
    .ant-select-clear-icon {
      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;
    background-color: transparent !important;
    &:hover {
      background-color: #055565 !important;
    }
    &-selected {
      color: #0cebc9;
      font-weight: normal;
    }
    &-disabled {
      color: #476d74 !important;
      &:hover {
        background-color: transparent !important;
      }
    }
  }
}

// 树形结构
.ant-tree {
  &-checkbox {
    &-checked {
      .ant-tree-checkbox-inner {
        background-color: #00e9fe !important;
        border-color: #00e9fe !important;
      }
    }
  }
  &-checkbox-inner {
    background-color: #03353f !important;
    border-color: #0a544e !important;
    border-radius: 0;
    &::after {
      border-color: #000 !important;
    }
  }
  &-node-content-wrapper {
    background-color: transparent !important;
  }

  &-treenode-disabled {
    .ant-tree-checkbox-inner {
      border-color: #0a544e !important;
    }
    .ant-tree-checkbox-disabled {
      .ant-tree-checkbox-inner {
        &::after {
          border-color: rgba(0, 0, 0, 0.3) !important;
        }
      }
    }
  }
  &-node-selected {
    .ant-tree-title {
      color: #0cebc9 !important;
    }
  }

  &-title {
    user-select: none;
    color: #ade6ee !important;
  }
}

// 按钮
.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;
    }
  }

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

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

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

  &-item {
    min-width: 26px;
    height: 26px !important;
    line-height: 26px !important;
    border-radius: 13px;
    &-active {
      background-color: #00bded;
      a {
        color: #fff !important;
      }
    }
    &-ellipsis {
      color: #ade6ee !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: 22px;
  }
}

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

// 通知样式
.ant-message {
  &-notice {
    &-content {
      border: 1px solid @formInputBorderColor;
      background-color: @modalBg;
      border-radius: 0;
    }
  }
}

.ant-notification {
  &-notice {
    background-color: @modalBg;
    &-message {
      color: #fff;
    }
    &-close {
      color: #fff !important;
    }
  }
}

// 抽屉
.ant-drawer {
  &-header {
    background-color: @modalBg;
    border-bottom-color: @formInputBorderColor;
  }
  &-title,
  &-close {
    color: #fff !important;
  }
  &-content {
    background-color: @modalBg;
  }
  &-body {
    > div {
      background-color: @modalBg !important;
      border: none !important;
    }

    .drawer-bootom-button {
      border-top: 1px solid #0b8c82 !important;
    }
  }
}

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

.ant-popover {
  &-inner {
    background-color: #03353f;
  }
  &-arrow {
    border-left-color: #03353f !important;
    border-top-color: #03353f !important;
    z-index: -1;
  }
}

// 滚动条
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #15494c !important;
}

// 穿梭框样式
.ant-transfer {
  &-list {
    border-radius: 0;
    border-color: #224852;
    &-header {
      background-color: #08363c;
      border-radius: 0;
      border-bottom-color: #224852;
    }
    &-body {
      overflow: auto;
    }
  }
  &-operation {
    .ant-btn {
      background-color: #1397a3;
      border: none;
      border-radius: 0;
      color: #fff;
      &:disabled {
        background-color: #4f7578;
        color: #fff;
      }
    }
  }
}

.ant-divider {
  background-color: @formInputBorderColor;
}

.ant-spin {
  &-blur::after {
    opacity: 0.1;
  }
}

.ant-popover {
  &-arrow {
    border-right-color: @formInputBgColor !important;
    border-bottom-color: @formInputBgColor !important;
  }
}

// collapse
@collapse-panel-border-radius: 0;
@collapse-header-padding: 0;
@collapse-header-bg: transparent;
@collapse-header-padding-extra: 20px;
@collapse-content-padding: 0;
@collapse-content-bg: transparent;
.ant-collapse {
  border: none;

  > .ant-collapse-item {
    border-bottom: none;
  }

  &-content {
    border-top: none;
  }
}

#userLayout {
  .container {
    background-color: @modalBg !important;
    .title {
      color: #fff !important;
    }
  }
}

::-webkit-scrollbar-track {
  background-color: #15494c !important;
}

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

::-webkit-scrollbar-button {
  background-color: #15494c !important;
  display: none;
}

::-webkit-scrollbar-track-piece {
  background-color: #15494c !important;
}

::-webkit-scrollbar-corner {
  background-color: #15494c;
}