General-AI-Platform-Web/src/global.less

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
  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';
}

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

.ant-layout {
  min-height: 100vh;
}
.ant-pro-sider.ant-layout-sider.ant-pro-sider-fixed {
  left: unset;
}

canvas {
  display: block;
}

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

ul,
ol {
  list-style: none;
}

@media (max-width: 768px) {
  .ant-table {
    width: 100%;
    overflow-x: auto;
    &-thead > tr,
    &-tbody > tr {
      > th,
      > td {
        white-space: pre;
        > span {
          display: block;
        }
      }
    }
  }
}

.keep-alive-tabs {
  .ant-tabs-nav {
    margin: 0;
  }
}

.ant-pro .ant-pro-layout .ant-pro-layout-content {
  padding: 0;
}


.ant-pro-form-login-page-left{
  max-width: none !important;
}

.ant-pro-card-col.ant-pro-card-split-vertical {
  border-inline-end: none;
}

.ant-pro-card-col.ant-pro-card-split-horizontal {
  border-block-end: none;
}
/* 1108 update 全局样式新增调整 */


// TODO_update 全局小尺寸按钮，统一间距 （列表操作栏位按钮）
.ant-table-cell .ant-btn.ant-btn-sm{
  padding: 0;
}
// 更多
.ant-pro-table-search .ant-form-item .ant-form-item-label{
  text-align: left
}

.ant-btn-link{
  color: #155BD4;
}

.ant-pro-card .ant-pro-card-title {
  color: #333333;
  font-weight: 700;
  font-size: 16px;
}

// 弹出框
.ant-modal .ant-modal-content{
  padding: 20px 24px;
}
.ant-modal-header{
  padding-bottom: 10px;
}

// TODO_update 自定义样式块

/* 单行文本溢出显示省略号 */
.single_line {
  white-space: nowrap;      /* 防止文本换行 */
  overflow: hidden;        /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

/* 多行文本溢出显示省略号 */
.two_line {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  overflow: hidden;       /* 隐藏溢出的文本 */
}

* {
  padding: 0;
  margin: 0;
}


/* 颜色 */
.theme_color, .ant-table-cell>a,
.ant-descriptions-item-content>a,
a.ant-dropdown-trigger{
  color: #155BD4;
}

.theme_bg_color{
  background-color: #155BD4;
}



.ant-menu-light .ant-menu-item-selected, .ant-menu-light>.ant-menu .ant-menu-item-selected {
  background-color: #e8effb;
  border-left: 3px solid #155BD4;
  border-radius: 0;
}

.ant-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background-color: #e8effb;
}
.ant-tree .ant-tree-node-content-wrapper.ant-tree-node-selected, .ant-tree .ant-tree-checkbox+span.ant-tree-node-selected {
  background-color: #e8effb;
  color: #155BD4;
}

.ant-steps .ant-steps-item-active>.ant-steps-item-container>.ant-steps-item-content{
  &> .ant-steps-item-title{
    color: #155BD4;

  }
  &> .ant-steps-item-description{
    color: #155BD4;
    // color: #155cd5;

  }
}
.ant-layout-sider-children{
  background-color: white;
}

.ant-btn-link.ant-btn-dangerous, .ant-btn-default.ant-btn-dangerous {
  color: #E80D0D;
}
.ant-btn-default.ant-btn-dangerous{
  border-color: #E80D0D;
}

.ant-tree-treenode.ant-tree-treenode-switcher-open.ant-tree-treenode-selected {
  background-color: #e8effb;
  width: 100%;
  border-radius: 4px;
  padding-top: 4px ;
}

/* 表单 */
.ant-form-item {
  margin-bottom: 16px;
}
// 分步表单步骤条
.ant-steps .ant-steps-item-finish .ant-steps-item-icon{
  background-color: rgba(#155BD4, 0.1);
  border-color: #155BD4;
}
// 表单项之间间距
.ant-pro-form-group-container{
  gap: 0px 16px !important;
}
.ant-modal .ant-modal-title{
  font-size: 18px;
}


.ant-modal-body .ant-pro-steps-form-steps-container{
  max-width: 1900px !important;
}
/* 列表table && proTable */
// proTable 
.ant-pro-table{
  // 标题栏左侧文字最大弹性占比
  .ant-pro-table-list-toolbar-left{
    flex: 0.3
  }
  // 筛选表单
  .ant-pro-table-search{
    .ant-form{
      .ant-pro-query-filter-row-split{
        padding-right: 0 !important;
      }
    }
  }
}

// proList

.ant-pro-list{
  .ant-pro-query-filter.ant-pro-query-filter {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
  }

  .ant-pro-table-list-toolbar-left{
    flex: 1
  }

}

// 气泡框
.ant-popover .ant-popover-content {
  min-width: 200px;
}

.rc-virtual-list-scrollbar-thumb{
  display: none
}
/* ant-descriptions */
.ant-descriptions{
  .ant-descriptions-row >th,  
  .ant-descriptions-row >td {
    padding-right: 12px;
  }
}

// 美化滚动条
::-webkit-scrollbar-track-piece {
  -webkit-border-radius: 0
}
::-webkit-scrollbar {
  width: 5px;
  height: 10px
}
::-webkit-scrollbar-thumb {
  height: 50px;
  background-color: #CCC;
  -webkit-border-radius: 6px;
  outline-offset: -2px;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5
}
::-webkit-scrollbar-thumb:hover {
  height: 50px;
  background-color: #878987;
  -webkit-border-radius: 6px
}
// 动作按钮
.ant-tag-default {
  border-radius: 2px;
  border: 1px solid #CCC;
  background: rgba(204, 204, 204, 0.10);  
  color: #999;
}
.ant-tag-success{
  border-radius: 2px;
  border: 1px solid #52C41A;
  background: rgba(82, 196, 26, 0.10);
}
.ant-tag-warning {
  border-radius: 2px;
  border: 1px solid var(--1, #FAAD14);
  background: rgba(250, 173, 20, 0.10);
}
.ant-tag-error {
  border-radius: 2px;
  border: 1px solid #E80D0D;
  color: #E80D0D;
  background: rgba(232, 13, 13, 0.10);
}

.gn {
  // TODO_update 重置覆盖默认样式，使用统一类名gn + 需要覆盖的类名
  .ant-pro-checkcard-content {
    padding-inline: 0;
    padding-block: 0;
  }
  .ant-pro-checkcard {
    margin-inline-end: 0;
    margin-block-end: 0;
  }
  .ant-pro-list-row-card {
    margin-block: 6px;
    margin-inline: 0;
    padding-block: 0;
    padding-inline: 6px;
  }

  .ant-list .ant-list-pagination {
    margin-block-start: 10px;
  }

  .ant-table-wrapper table tr th.ant-table-selection-column,
  .ant-table-wrapper table tr td.ant-table-selection-column,
  .ant-table-wrapper .ant-table-selection-column{
    text-align: left;
  }
  .ant-transfer-customize-list .ant-table-wrapper .ant-table-small .ant-table-selection-column{
    padding-left: 12px;
  }

  .ant-tabs >.ant-tabs-nav .ant-tabs-nav-wrap{
    .ant-tabs-nav-list{
      padding: 0 16px;
      margin-block-start: 0;
      .ant-tabs-tab-active{
        font-weight: 400
      }
    }
  }

  .ant-tabs .ant-tabs-tab .anticon {
    margin-right: 4px;
  }

  .ant-pro-table-list-toolbar-container {
    padding-block: 8px;
  }

  .ant-pro-global-header-header-actions-item >*{
    padding-block: 0;
  }

  .ant-radio-group-large .ant-radio-button-wrapper {
    height: 32px;
    line-height: 32px;
  }
  .ant-input-affix-wrapper-lg{
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }
  .ant-btn.ant-btn-lg {
    font-size: 14px;
    height: 32px;
    border-radius: 4px;
  }
  .ant-input-search .ant-input-group .ant-input-affix-wrapper:not(:last-child) {
    border-start-start-radius: 4px;
    border-end-start-radius: 4px;
  }

  .proListActionBox{
    .ant-btn.ant-btn-sm{
      padding: 0;
      font-size: 14px;
    }
  }
  
  /* UI 规范表 // update 使用中
  适用说明 
  字体大小、颜色、粗细
  页面间距
*/
  // &.p1 {
  // line-height: ;
  //   font-weight: 600;
  // }
  &.fw7{
    font-weight: 700;
  }
  &.h2{
    font-size: 18px;
  }

  &.h3{
    font-weight: 600;
  }

  &.h4{
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    color: rgba(51, 51, 51, 1);
  }
  &.text_0{
    color: '#000';
  }
  &.text_1{
    color: '#333';
  }
  &.text_2{
    color: '#666';
  }
  &.text_3{
    color: '#999';
  }
  &.text_green{
    color: #52C41A;
  }
  &.fs14{
    font-size: 14px;
  }

  .des_1{
    font-size: 12px;
    font-weight: 400;
    line-height: 22px;
    color: rgba(102, 102, 102, 1)
  }
  // 边框
  .border_bottom_1 {
    border-bottom: 1px solid #E0E0E0
  }

  &.themeBgHover:hover{
    background-color: #155BD4;
  }


  // 项目部署模块
  &.algorithmSetting_project_box{

    .algorithmSetting_mode_box{
      .active {
        .ant-btn-default{
          border: 1px solid #154DDD;
          background: rgba(21, 77, 221, 0.10);
          color: #154DDD;
        }
      }
    }
   
    // &.ant-tabs .ant-tabs-ink-bar{
    //   background: transparent;
    // }
    // &.ant-tabs .ant-tabs-tab{
    //   padding: 16px 0 0px;
    // }
    // &.ant-tabs .ant-tabs-tab+.ant-tabs-tab{
    //   // margin: 0;
    //   margin:0 0 0 12px;
    // }
    // & .ant-tabs-tab-active{
    //   .ant-btn-default{
    //     border: 1px solid #154DDD;
    //     background: rgba(21, 77, 221, 0.10);
    //     color: #154DDD;
    //   }
    // }
  }
}
.ant-pro-global-header-logo img {
  height: 48px;
}

.rectProgress_box{
  .ant-progress .ant-progress-inner{
    border-radius: 2px;
  }
  .ant-progress .ant-progress-success-bg, .ant-progress .ant-progress-bg{
    border-radius: 2px;
  }
}


// 内部表单样式
.innerFormList_box{
  .ant-form-item {
    margin-bottom: 12px;
  }
}