/* 暗色主题 */
$dark-logo: url('../../../../public/logo/logo-lang-light.svg');
$dark-bg: #1e1f22; //背景
$dark-bg-highlight: #333; //高亮块：背景
$dark-text: #ddd; //字体颜色
$dark-bd: #333; //边框和分隔线
$dark-btn: #444; //按钮：边框和背景颜色
$dark-input: #777; //输入框：背景色
.theme-dark {
  hr {
    border-color: $dark-bd;
  }

  /* 背景色和字体颜色 */
  .ds_layout,
  .ant-layout,
  .ds-container,
  .ds-container .container-header,
  .ant-layout-footer {
    background: $dark-bg;
    color: $dark-text;
  }
  div,
  span,
  label {
    color: $dark-text;
  }
  .form-help {
    color: #a1a1a1;
  }
  code {
    color: #bbb;
    background-color: #333;
  }

  /* 高亮块：背景色和字体颜色 */
  /* 警告类型 */
  .ant-alert-warning {
    background: $dark-bg-highlight;
    border-color: $dark-bg-highlight;
    color: $dark-text;
    /* 关闭图标颜色 */
    .ant-alert-close-icon .anticon-close {
      color: $dark-text;
    }
  }
  /* 消息类型 */
  .ant-alert-info {
    background: $dark-bg-highlight;
    border-color: $dark-bg-highlight;
    color: $dark-text;
  }

  /* 边框和分隔线 */
  .ant-layout-has-sider,
  .ant-layout-sider-children,
  .ds-container .container-header,
  .logo,
  .footer-bar,
  .ant-layout-footer,
  .ant-tabs .ant-tabs-left-bar,
  .ant-tabs .ant-tabs-left-content {
    border-color: $dark-bd;
  }
  .ant-radio-button-wrapper:not(:first-child)::before {
    background-color: #666;
  }
  .ant-divider {
    background: $dark-bd;
  }

  .help-list .title1 {
    border-bottom-color: $dark-bd;
  }

  /* 左侧 */
  /** 背景色 **/
  .ant-layout-sider {
    background: $dark-bg;
  }
  /** Logo **/
  .logo {
    background-image: $dark-logo; /* logo使用亮色的 */
  }
  /** 菜单 **/
  .ant-menu {
    background: $dark-bg;
    color: $dark-text;
  }
  /* 菜单选中时，或鼠标移到菜单上时的样式 */
  .ant-menu-item:hover,
  .ant-menu-submenu .ant-menu-submenu-title:hover,
  .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
    background: $dark-bg-highlight;
    color: #1890ff;
    span {
      color: #1890ff;
    }
  }

  /* 输入框、下拉框 */
  .ant-input,
  .ant-input-number-input,
  .ant-input-number,
  .ant-select-selection,
  .ant-input-group-addon {
    background: $dark-input;
    border-color: #aaa;
    color: $dark-text;
    &:hover,
    &:focus {
      border-color: #fff;
    }
  }

  /* 卡片消息：IP测速 */
  .ant-card {
    background: $dark-input;
    border-color: $dark-input;
    .ant-card-head {
      border-bottom-color: #929292;
    }
  }

  /* 标签：未启用 */
  .ant-tag-red {
    background: #4f4749;
    border-color: #4f4749;
    color: #bf8285;
  }
  /* 标签：已启用 */
  .ant-tag-green {
    background: #505f5f;
    border-color: #505f5f;
    color: #90cb9f;
  }
  /* 标签：警告 */
  .ant-tag-orange {
    background: #5a5750;
    border-color: #5a5750;
    color: #cfa572;
  }

  /* 按钮 */
  .ant-btn:not(.ant-btn-danger, .ant-btn-primary) {
    background: $dark-btn;
    border-color: $dark-btn;
    color: $dark-text;
    &:hover {
      opacity: 0.8;
    }
  }

  /* 单选框：开关式 */
  .ant-switch:not(.ant-switch-checked) {
    background: $dark-btn;
    border-color: $dark-btn;
    &:hover {
      opacity: 0.8;
    }
  }
  /* 单选框：按钮式 */
  .ant-radio-button-wrapper {
    background: $dark-btn;
    border-color: $dark-btn;
    color: $dark-text;
    &:hover {
      opacity: 0.8;
    }
  }

  /* JSON编辑器：应用于拦截设置 */
  .jsoneditor-vue {
    /*整个编辑框：背景色和边框*/
    div.jsoneditor {
      background: $dark-bg-highlight;
      border: none;
    }
    /* 头部菜单栏：边框  */
    div.jsoneditor-menu {
      background: $dark-bg-highlight;
      border-color: $dark-bg-highlight;
    }
    /* 内容区域左边：行号 */
    .ace_gutter {
      background: #444;
      .ace_gutter-cell {
        color: #aaa;
      }
    }
    /* 内容区域右边：JSON内容 */
    .ace_scroller {
      background: #555;
    }
    /* key的颜色 */
    .ace_variable,
    .ace_text-layer {
      color: #eee;
    }
    /* 字符串值的颜色 */
    .ace_string,
    .ace_cjk {
      color: #a6eaa6;
    }
    .ace_constant {
      /* 数字的颜色 */
      &.ace_numeric {
        color: #ec9999;
      }
      /* 布尔值的颜色 */
      &.ace_language {
        color: #f4c995;
      }
    }
    /* 当前行高亮样式 */
    .ace_gutter-active-line,
    .ace_marker-layer .ace_active-line {
      background: #838774;
    }
    /* 选中行高亮样式 */
    .ace-jsoneditor {
      .ace_marker-layer .ace_selection {
        background: #8b2929; /* 同时应用于当前选中的搜索结果项的背景色，建议与搜索结果边框颜色保持一致 */
      }

      /* 光标颜色 */
      .ace_cursor {
        border-left-color: #ddd;
      }
    }
    /* 搜索框 */
    .ace_button,
    button,
    .ace_search_field {
      color: #000;
    }
    /* 搜索结果 */
    .ace-jsoneditor .ace_marker-layer .ace_selected-word {
      border-color: #8b2929;
    }
  }
}
