zhongze-admin/src/global.less

html,
body,
#root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';

  //让全局的空白展示页水平垂直居中;
  .ant-empty {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: center;
  }
}

.colorWeak {
  filter: invert(80%);
}

.ant-layout {
  min-height: 100vh;
}

.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
  left: unset;
}

.ant-pro-page-container-children-container {
  padding-top: 0;
  padding-left: 8px;
}

// 用于让PageContainer容器的高宽度占满父元素;
.TheAllParentHeightPageContainer {
  .ant-pro-grid-content {
    height: 100%;
    .ant-pro-grid-content-children {
      height: 100%;
      .ant-pro-page-container-children-container {
        height: 100%;
        padding: 0px !important;
      }
    }
  }
}

// #root > .ant-pro-layout {
//   height: 100%;
// }

.ant-picker,
.ant-select,
.ant-btn,
.ant-input-number,
.ant-select-selector,
.ant-input-search,
.ant-input,
.ant-input-group-addon {
  border-radius: 0px;
}

.ant-pro-global-footer {
  margin: 0;
}

.containerRow {
  height: 82vh;
  background-color: #fff;
}

canvas {
  display: block;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul,
ol {
  list-style: none;
}

.ant-menu-overflow-item,
.ant-menu-submenu-title {
  height: 50px !important;
}

.ant-pro-layout .ant-pro-layout-content {
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

.ant-tabs-top {
  height: 40px;
}

:where(.css-dev-only-do-not-override-1p8fl91).ant-pro-layout .ant-pro-layout-content {
  padding-block: 0 !important;
  padding-inline: 0 !important;
}

:global {
  .ant-menu-overflow-item {
    height: 48px !important;
  }
}

/* .topContainer {
  position: relative;
  height: 100%;
  min-height: 87vh;
  background-color: #fff;
} */

@media (max-width: 768px) {
  .ant-table {
    width: 100%;
    overflow-x: auto;

    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;

        > span {
          display: block;
        }
      }
    }
  }
}
.ant-menu-light .ant-menu-item {color: #fff;}
  
.ant-menu-light .ant-menu-submenu-title {color: #fff;}

.ant-layout-sider-children .ant-menu-root {
  // background-color: rgb(57, 89, 200) !important;
  background-image: url('/image/leftMenu.png');
  background-image: linear-gradient(to bottom, #1d36aa, #1667db, #00d3a1);
  background-repeat: no-repeat;
  background-size: 100%;
}

.ant-layout-sider-children {
  padding-inline: 0px !important;
}

// .ant-menu-item-selected {
//   background-color: rgb(47, 135, 237) !important;
//   // background-color: #00D3A1 !important;
// }

.ant-menu-submenu-arrow {
  color: white !important;
}

.ant-pro-sider-actions {
  display: none !important;
}

.ant-dropdown-menu {
  padding: 0px !important;
}

.ant-pro-sider-collapsed-button {
  transform: translateY(-6px);
}

.ant-dropdown-menu-item-active:hover {
  background: #ecf8ff !important;
}

.rightHeadBtn:hover {
  background: #ecf8ff;
}

.ant-layout-header {
  height: 48px;
  margin-bottom: 5px;
  padding-right: 0;
  background: rgb(255, 255, 255);
  box-shadow: 0px 2px 5px #ddd;
}

.ant-pro-sider-logo {
  height: 48px !important;
}

.ant-card {
  border: none !important;
}

// 滚动条样式
.ant-layout-sider {
  ::-webkit-scrollbar {
    // width: 100px !important;
    width: 10px;
    margin-right: 2px;
    background: #fff !important;
    // transition: 1s all ease-out;
  }

  // 滚动条轨道
  ::-webkit-scrollbar-track {
    background: #3959c8;
  }

  // 滚动滑块
  ::-webkit-scrollbar-thumb {
    background: #ecf8ff;
    border-radius: 8px;
  }

  // hover效果
  ::-webkit-scrollbar-thumb:hover {
  }

  ::-webkit-scrollbar-track:hover {
    background: #2a439e;
  }
}

//设置右侧标签页对应内容区;
.topContainer {
  position: relative;

  height: 100%;
  min-height: 87vh;
  //background-color: #fff;

  .ka-wrapper {
    height: 100%;

    .ka-content {
      height: 100%;
      //background-color: rgb(245 245 245);

      //让标签页中理论上可以最简单地通过覆盖来实现任意的css样式,因为从这开始,才是单个路由页面开始;
      // &:nth-child(1),
      & > div {
        @the-margin-width: 20px;
        position: relative;
        width: calc(100% - 2 * @the-margin-width);
        height: calc(100% - 2 * @the-margin-width);
        margin: @the-margin-width;
        background-color: #fff;
      }
    }
  }
}

//全局布局的配置项;
.ant-pro-setting-drawer-handle {
  display: none;
}

.ant-menu-light.ant-menu-horizontal > .ant-menu-submenu-selected::after {
  border-bottom-color: #00d3a1;
  border-bottom-width: 2px;
}

.ant-menu-light.ant-menu-horizontal > .ant-menu-submenu:hover::after {
  border-bottom-color: #00d3a1;
  border-bottom-width: 2px;
}

.ant-menu-item-selected {
  color: #00d3a1;
  background-color: rgba(0, 0, 0, 0);
}

.ant-pro-base-menu-inline {
  color: #fff;
}

.ant-layout-sider-children .ant-menu-light .ant-menu-submenu-selected > .ant-menu-submenu-title {
  color: #fff;
}

.ant-menu-light .ant-menu-item-selected {
  position: relative;
  color: #00d3a1;
}

.ant-menu-light .ant-menu-item-selected ::after {
  position: absolute;
  top: 50%;
  left: 15px;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background-color: #00d3a1;
  border-radius: 50%;
  content: '';
}

.ant-pro-layout .ant-pro-sider .ant-menu .ant-menu-item:hover {
  color: #00d3a1;
}
.ant-pro-layout .ant-pro-sider .ant-menu .ant-menu-item:not(.ant-menu-item-selected):hover{
  color: #00d3a1;
}

//自定义滚动条;
.custom-scrollbar {
  padding: 0px 12px 0px 0px;
  &:hover {
    // 整个滚动条;
    box-sizing: border-box;
    padding: 0px 0px 0px 0px;
    &::-webkit-scrollbar {
      box-sizing: border-box;
      width: 12px;
      padding: 0px 2px;
      border: 1px solid rgba(52, 136, 255, 0.2);
    }
    // 定义滚动条轨道
    &::-webkit-scrollbar-track {
      width: 1px;
      background-color: transparent;
    }
    // 滚动条上的滚动滑块;
    &::-webkit-scrollbar-thumb {
      background-image: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 28.1%,
        rgba(52, 136, 255, 1) 28.1%,
        rgba(52, 136, 255, 1) 71.9%,
        rgba(0, 0, 0, 0) 71.9%,
        rgba(0, 0, 0, 0) 100%
      );
      border-radius: 12px;
    }
    // 滚动条没有滑块的轨道部分;
    &::-webkit-scrollbar-track-piece {
      // width: 6px;
      // background-color: skyblue;
      background-color: transparent;
    }
    // 滚动条上的按钮;
    &::-webkit-scrollbar-button {
      height: 0;
      background-color: transparent;
    }
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0); //让它在鼠标没移动到之前为透明的。
  }

  &::-webkit-scrollbar {
    width: 0px;
  }
}