@choerodon/master/lib/containers/components/style/index.less

A package of Master for Choerodon platform.

@import '~choerodon-ui/dist/choerodon-ui.less';
@import '~choerodon-ui/lib/style/themes/default';

:root {
  --banner-height: 40px;
  // 通知栏弹框宽度
}

:root {
  // 主色
  --primary-color: #5365EA;
  --primary-color-background: #5365EA0D;
  // 淡一点的主色
  --primary-color2: rgba(83, 101, 234, 0.08);
  // 分割线颜色
  --divider: #d9e6f2;
  // 表格可点击颜色
  --table-click-color: #415BC9;
  // 字体颜色
  --text-color: #0f1358;
  // 字体颜色2，代替之前的0.87
  --text-color2: #0f1358;
  // 字体颜色3，代替之前的0.65
  --text-color3: rgba(15, 19, 88, 0.65);
  // 字体颜色4，代替之前的0.54
  --text-color4: rgba(15, 19, 88, 0.54);
  // 选中背景色
  --selection-background: rgba(83, 101, 234, 0.06);
  // 宽度拖拽线颜色
  --drag-resize-color: #5365ea;
  // 问号提示ICON颜色
  --help-icon-color: #abbccf;
}

// ckeditor专属
:root {
  // 下拉背景
  --ck-color-list-button-on-background: rgba(104, 135, 232, 0.08);
  // 下拉背景active
  --ck-color-list-button-on-background-focus: rgba(104, 135, 232, 0.08);
  // 下拉hover
  --ck-color-button-default-hover-background: rgba(15, 19, 88, 0.03);
  // 下拉字默认
  --ck-color-text: var(--text-color);
  // 下拉字active
  --ck-color-list-button-on-text: var(--primary-color);
  // focus边框
  --ck-focus-ring: 1px solid transparent;
  // 边框
  --ck-color-toolbar-border: var(--divider);
  // 表格调整聚焦背景
  --ck-color-focus-border: var(--primary-color);
}

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

::-webkit-scrollbar-thumb {
  background-color: rgba(15, 19, 88, 0.26);
  transition: background-color .3s;

  &:hover {
    background-color: #aeaeae;
  }
}

body {
  font-size: 0.13rem !important;
}

@btn-height-base: 0.32rem;
@btn-padding-base: 0 .12rem;

body:not([data-theme="theme4"]) {
  .@{c7n-pro-prefix} &-btn {
    i {
      font-size: 0.18rem !important;
    }
  }
}

.@{c7n-pro-prefix} {
  &-btn {
    font-weight: 500;
    height: 0.32rem;
  }

  &-modal {
    &-body {
      padding-top: 0.24rem;
    }

    &-footer {
      background: white;

      .c7n-pro-btn {
        font-weight: 500;

        & > span {
          vertical-align: baseline;
        }

        &-default {
          color: #3f51b5;
        }
      }
    }
  }

  &-validation-message {
    white-space: normal;
  }

  &-select-dropdown-menu-item:hover,
  &-select-dropdown-menu-item-active {
    background-color: rgba(0, 0, 0, 0.04) !important;
  }

  &-table-wrapper {
    .@{c7n-pro-prefix}-table-filter-select-wrapper {
      .@{c7n-pro-prefix}-table-filter-select {
        .@{c7n-pro-prefix}-table-filter-select-multiple-input {
          background-color: transparent !important;
        }
      }
    }
  }
}

.c7n-modal-sidebar {
  .c7n-modal-body {
    padding: .24rem .2rem;
  }

  & > .c7n-modal-content {
    right: 0 !important;
    left: inherit !important;
  }
}

// 覆盖table header中问号提示icon和颜色
.@{c7n-pro-prefix}-table .@{c7n-pro-prefix}-table-thead > tr > th .c7n-pro-table-cell-inner .c7n-pro-table-help-icon {
  color: var(--help-icon-color) !important;
  font-size: .14rem;
  font-weight: normal;

  &:before {
    content: "\e887";
  }
}

.c7n-modal-sidebar .c7n-modal-header {
  border-color: rgb(217, 230, 242);
}

.c7n-modal-sidebar .c7n-modal-body {
  padding: 20px !important;
}


.c7n-modal-sidebar .c7n-modal-footer {
  justify-content: flex-end;

  // 翻转按钮
  .c7n-modal-btns {
    transform: rotate(180deg);

    button {
      transform: rotate(180deg);
    }
  }

  border-color: rgb(217, 230, 242);
}

.c7n-radio-group-wrapper .c7n-radio-group-label {
  color: rgb(74, 92, 144) !important;
}

// 旧table分页样式
.c7n-table-wrapper {
  .c7n-pagination {
    .c7n-pagination-options-size-changer {
      position: relative;
      right: 4px;
      top: 3px;
    }

    input {
      border-radius: 0.04rem;
      border: 0.01rem solid rgb(217, 230, 242);
    }
  }

  .c7n-pagination-options {
    height: 33px !important;
  }
}

// textarea
.c7n-input.c7n-input-textarea-element {
  line-height: 1.5 !important;
}

.c7ncd-guide-origin {
  z-index: 900 !important;
}

// tab样式
.c7n-tabs-nav-wrap {
  padding-left: .16rem;
}


// 火狐浏览器在mac下字体显示较细，所以这里设置为500
.c7n-pro-table .c7n-pro-table-content table .c7n-pro-table-tfoot tr .c7n-pro-table-cell .c7n-pro-table-cell-inner span,
.c7n-pro-table .c7n-pro-table-content table .c7n-pro-table-thead tr .c7n-pro-table-cell .c7n-pro-table-cell-inner span {
  font-weight: 500 !important;
}
.c7n-pro-modal.c7n-pro-modal .c7n-pro-modal-content .c7n-pro-modal-body{
  font-weight: 400 !important;
}