html,
body,
.admin-container,
#app {
  height: 100%;
}

html {
  --el-bg-color-page: #f0f2f5;
  --el-border-color: #dcdfe6;
  --slide-bg: #282c34;

  .el-text {
    --el-text-color: inherit;
  }
}

body {
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    '微软雅黑', Arial, sans-serif;
  color: #222831;
  font-size: 16px;
  overflow: hidden;

  --slide-width: 240px;
  background-color: var(--el-bg-color-page);
  letter-spacing: 0.5px;
}

.iconfont {
  font-size: inherit;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--el-border-color-light);
  border-radius: 9px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--el-color-primary);
  border-radius: 9px;
}

a {
  text-decoration: none;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill,
input:-internal-autofill-selected {
  box-shadow: 0 0 0px 1000px white inset;
}

.admin-block-button {
  display: block;
  width: 100%;
}

.admin-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .el-container {
    height: 100%;
  }

  &.horizontal {
    --el-menu-active-color: #ffffff;
    // --el-menu-text-color: #ffffff;
    --el-menu-hover-text-color: #ffffff;
    --el-menu-bg-color: none;

    --el-menu-item-height: 36px;
    --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
    --el-menu-horizontal-sub-item-height: 36px;
    --el-menu-item-font-size: 14px;
    --el-menu-item-hover-fill: var(--el-color-primary-light-9);
    --el-menu-border-color: var(--el-border-color);
    --el-menu-base-level-padding: 20px;
    --el-menu-level-padding: 20px;
    --el-menu-icon-width: 24px;
    --el-transition-duration: 0.15s;
    --el-box-shadow-light: none;
    --el-border-radius-small: 0px;
    --el-menu-item-height: 45px;
    --el-menu-active-color: #ffffff;
    --el-menu-bg-color: none;
    --el-menu-text-color: rgba(255, 255, 255, 0.9);
    --el-menu-hover-bg-color: rgba(0, 0, 0, 0.2);

    .admin-header-left {
      border: none;
    }

    .el-menu,
    .el-menu-item,
    .el-sub-menu__title {
      border-bottom: none !important;
    }

    .el-menu-item.is-active,
    .el-sub-menu.is-active .el-sub-menu__title {
      color: var(--el-color-primary-light-9);
      background: rgba(0, 0, 0, 0.3);
      position: relative;
    }

    .admin-header {
      background: var(--slide-bg);
      color: var(--el-menu-text-color);
    }
  }
}

.el-menu-item [class^='el-icon'] {
  margin-right: 0;
}

.admin-bread {
  margin-left: 10px;
}

.admin-header {
  background: var(--el-bg-color);
  color: var(--el-text-color-primary);
  box-sizing: border-box;
  flex-shrink: 0;
  height: 60px;
  line-height: 60px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  padding-right: 30px;
  // box-shadow: 0 3px 4px var(--el-color-info-light-8);

  .el-badge {
    line-height: 1;
  }

  .admin-header-left {
    width: var(--slide-width);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-right: 10px; //修复视觉偏右
    padding-top: 5px; //修复视觉偏上
    border-right: 1px solid var(--el-border-color);
    box-sizing: border-box;
    color: rgba(255, 255, 255, 0.9);
    background: var(--slide-bg);
    height: 100%;
  }

  .admin-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    .header-item {
      padding: 0 15px;
    }

    .el-dropdown-link {
      padding-left: 10px;
      outline: none;
      display: flex;
      align-items: center;
    }
  }

  .header-brand {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand-text {
    font-size: 22px;
    padding-left: 10px;

    letter-spacing: 1px;
  }

  .admin-menu {
    width: 100%;
    padding: 0 100px;
    height: 60px;
  }
}

.admin-sub-menu {
  --el-transition-duration: 0.15s;

  .el-menu {
    box-shadow: none;
  }
}

.admin-body {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;

  .admin-slide {
    --el-menu-item-height: 45px;
    --el-menu-active-color: #ffffff;
    --el-menu-bg-color: none;
    --el-menu-text-color: rgba(255, 255, 255, 0.9);
    --el-menu-hover-bg-color: var(--el-color-primary);
    width: var(--slide-width);
    flex-shrink: 0;
    border-right: 1px solid var(--el-border-color);
    box-sizing: border-box;
    background: var(--slide-bg);

    .el-menu {
      height: 100%;
      border: none;

      .el-icon {
        color: inherit;
        font-size: inherit;
      }

      .el-menu-item {
        border: none;
        margin: 5px;
        margin-bottom: 0;
        border-radius: var(--el-border-radius-base);
      }

      .el-sub-menu__title {
        margin: 0 5px;
        border-radius: var(--el-border-radius-base);
      }

      .el-menu-item.is-active {
        color: var(--el-color-primary-light-9);
        background: var(--el-color-primary);
        position: relative;
      }
    }
  }

  .admin-body-view {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

.admin-header-right {
  display: flex;
  align-items: center;
  font-size: 18px;
  color: var(--el-text-color-secondary);

  .header-item {
    padding: 0 15px;
  }
}

.el-select {
  width: 240px;
}

.admin-view {
  width: 100%;
  height: 100%;
  padding: 24px;
  box-sizing: border-box;
  // overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.admin-view-search {
  padding: 18px 25px;
  padding-bottom: 0;
  background: var(--el-bg-color);
  flex-shrink: 0;
  margin-bottom: 24px;
  // border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
}

.admin-view-body {
  box-sizing: border-box;
  padding: 20px;
  flex: 1;
  background: var(--el-bg-color);
  // border: 1px solid var(--el-border-color);
  border-radius: var(--el-border-radius-base);
}

.admin-table-btns {
  padding-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.admin-table-list {
  .el-table {
    --el-table-border-color: var(--el-border-color-lighter);
    --el-table-border: 1px solid var(--el-table-border-color);
    // --el-table-text-color: #1c2c49;
    // --el-table-header-text-color: #00152a;
    // --el-table-row-hover-bg-color: var(--el-fill-color-light);
    // --el-table-current-row-bg-color: var(--el-color-primary-light-9);
    --el-table-header-bg-color: var(--el-border-color-lighter);
    // --el-table-fixed-box-shadow: var(--el-box-shadow-light);
    // --el-table-bg-color: var(--el-fill-color-blank);
    // --el-table-tr-bg-color: var(--el-color-white);
    // --el-table-expanded-cell-bg-color: var(--el-fill-color-blank);
    // --el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);
    // --el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);

    .cell {
      min-height: 20px;
      padding: 5px;
    }

    .cell .el-switch {
      height: auto;
    }
  }
}

.admin-space {
  .el-form-item__content {
    align-items: flex-start;
  }
}

.el-form-item__content:empty:before,
.el-table__row .cell:empty:before,
.admin-table-links:empty:before,
.el-descriptions-item__content:empty:before {
  content: '--';
}

.admin-pager-container {
  box-sizing: border-box;
  padding: 25px 0;
  display: flex;
  justify-content: flex-end;
}

.el-input-group__append,
.el-input-group__prepend {
  background: none;
}

.el-input {
  --el-form-inline-content-width: auto;
}

html {
  .el-input-number {
    width: 100%;
  }
}

html.dark {
  color-scheme: dark;
  --el-color-primary: #589ef8;
  --el-color-primary-light-3: #4475b4;
  --el-color-primary-light-5: #365986;
  --el-color-primary-light-7: #283d58;
  --el-color-primary-light-8: #223042;
  --el-color-primary-light-9: #1b222b;
  --el-color-primary-dark-2: #79b1f9;
  --el-color-success: #21ba45;
  --el-color-success-light-3: #1d8836;
  --el-color-success-light-5: #1b672d;
  --el-color-success-light-7: #184623;
  --el-color-success-light-8: #17351e;
  --el-color-success-light-9: #152519;
  --el-color-success-dark-2: #4dc86a;
  --el-color-warning: #f2711c;
  --el-color-warning-light-3: #af551a;
  --el-color-warning-light-5: #834318;
  --el-color-warning-light-7: #573016;
  --el-color-warning-light-8: #402716;
  --el-color-warning-light-9: #2a1d15;
  --el-color-warning-dark-2: #f58d49;
  --el-color-danger: #db2828;
  --el-color-danger-light-3: #9f2222;
  --el-color-danger-light-5: #781e1e;
  --el-color-danger-light-7: #501a1a;
  --el-color-danger-light-8: #3c1818;
  --el-color-danger-light-9: #281616;
  --el-color-danger-dark-2: #e25353;
  --el-color-error: #db2828;
  --el-color-error-light-3: #9f2222;
  --el-color-error-light-5: #781e1e;
  --el-color-error-light-7: #501a1a;
  --el-color-error-light-8: #3c1818;
  --el-color-error-light-9: #281616;
  --el-color-error-dark-2: #e25353;
  --el-color-info: #42b8dd;
  --el-color-info-light-3: #3487a1;
  --el-color-info-light-5: #2b6679;
  --el-color-info-light-7: #224550;
  --el-color-info-light-8: #1d353c;
  --el-color-info-light-9: #192428;
  --el-color-info-dark-2: #68c6e4;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000,
    0px 8px 16px -8px #000000;
  --el-bg-color-page: #0a0a0a;
  --el-bg-color: #141414;
  --el-bg-color-overlay: #1d1e1f;
  --el-text-color-primary: #e5eaf3;
  --el-text-color-regular: #cfd3dc;
  --el-text-color-secondary: #a3a6ad;
  --el-text-color-placeholder: #8d9095;
  --el-text-color-disabled: #6c6e72;
  --el-border-color-darker: #636466;
  --el-border-color-dark: #58585b;
  --el-border-color: #4c4d4f;
  --el-border-color-light: #414243;
  --el-border-color-lighter: #363637;
  --el-border-color-extra-light: #2b2b2c;
  --el-fill-color-darker: #424243;
  --el-fill-color-dark: #39393a;
  --el-fill-color: #303030;
  --el-fill-color-light: #262727;
  --el-fill-color-lighter: #1d1d1d;
  --el-fill-color-extra-light: #191919;
  --el-fill-color-blank: var(--el-fill-color-lighter);
  --el-mask-color: rgba(0, 0, 0, 0.8);
  --el-mask-color-extra-light: rgba(0, 0, 0, 0.3);
}

html.dark .ep-button {
  --el-button-disabled-text-color: rgba(255, 255, 255, 0.5);
}

html.dark .ep-card {
  --el-card-bg-color: var(--el-bg-color-overlay);
}

html.dark .ep-empty {
  --el-empty-fill-color-0: var(--el-color-black);
  --el-empty-fill-color-1: #4b4b52;
  --el-empty-fill-color-2: #36383d;
  --el-empty-fill-color-3: #1e1e20;
  --el-empty-fill-color-4: #262629;
  --el-empty-fill-color-5: #202124;
  --el-empty-fill-color-6: #212224;
  --el-empty-fill-color-7: #1b1c1f;
  --el-empty-fill-color-8: #1c1d1f;
  --el-empty-fill-color-9: #18181a;
}

.el-dialog {
  --el-dialog-padding-primary: 0;

  .el-dialog__header {
    padding: 10px 20px;
  }

  .el-dialog__body {
    // max-height: 78vh !important;
    padding: 0;
  }
}

.el-input-number.is-without-controls .el-input__wrapper {
  padding-left: 5px;
  padding-right: 5px;
}

.admin-drawer-body {
  padding: 0;

  .admin-dialog-body {
    max-height: 100% !important;
    flex: 1;
  }
}

.admin-drawer-header {
  margin-bottom: 15px;
}

.admin-dialog-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.admin-dialog-body {
  max-height: 78vh !important;
  overflow: auto !important;
  padding: 20px;
  box-sizing: border-box;

  .admin-view-search {
    margin-bottom: 0;
  }
}

.admin-dialog-footer {
  background-color: var(--el-fill-color);
  flex-shrink: 0;
  text-align: right;
  padding: 10px 20px;
  box-sizing: border-box;
}

.admin-view-form {
  .el-form-item {
    margin-bottom: 10px;
  }
}
