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

// 颜色
@box-shadow-style-default: 0 .03rem .01rem -0.02rem rgba(0, 0, 0, 0.2), 0 .02rem .02rem 0 rgba(0, 0, 0, 0.14), 0 .01rem .05rem 0 rgba(0, 0, 0, 0.12);
@font-color: var(--text-color4);
@font-color-dark: var(--text-color);
@font-color-light: #e1e1e1;
@bg-color1: rgba(0, 0, 0, 0.26);

.c7n-system-setting {
    &-form {
        margin-bottom: .24rem;
        .c7n-pro-field-required::after {
            content: '' !important;
        }
        font-size: .14rem;
        h3 {
            font-size: .16rem;
        }
        .divider {
            border-bottom: .01rem solid var(--divider);
            width: 100%;
            height: .01rem;
            margin-bottom: .16rem;
        }
        tr {
            td {
                .c7n-pro-field-wrapper {
                    padding: 0;
                    padding-bottom: .05rem;
                }
                padding: 0;
                padding-bottom: .05rem;
                &:first-of-type {
                    color: @font-color;
                }
                &:nth-of-type(2) {
                    color: @font-color-dark;
                }
                &:nth-of-type(3) {
                    color: @font-color;
                }
            }
        }
    }
}

.c7n-system-setting-formImg {
    width: .8rem !important;
    height: .8rem !important;
    border-radius: 50%;
    box-shadow: @box-shadow-style-default;
    padding: .08rem;
    &-wrapper {
        // position: absolute;
        background: #c5cbe8;
        text-transform: uppercase;
        user-select: none;
      width: .64rem;
      height: .64rem;
      border-radius: 50%;
      font-size: .4rem;
      line-height: .64rem;
      font-weight: 700;
      background-size: 100%;
      background-position: center;
      text-decoration: none;
      background-repeat: no-repeat;
      color: #3f51b5;
      text-align: center;
      &.default-favicon {
        background-image: url("assert/favicon.png");
      }
      &.default-logo {
        background-image: url("assert/choerodon_logo_picture.svg");
      }
    }
    img {
        width: 100%;
        border: .4rem;
        border-radius: 50%;
    }
}

.c7n-system-setting-avater {
    background-size: cover;
    width: .8rem;
    height: .8rem;
    display: block;
    margin: 0 auto;
    border-radius: 50px;
    &:hover {
      .c7n-system-setting-avater-mask {
        opacity: 1;
      }
    }
    &-container {
        height: 1rem;
    }
    &-mask {
      opacity: 0;
      transition: .2s;
      position: relative;
      padding: 0;
      display: block;
      width: .8rem;
      height: .8rem;
      top: -.8rem;
      background: rgba(0, 0, 0, 0.26);
      border-radius: 50%;
      color: @font-color-light;
      text-align: center;
      cursor: pointer;

      &:hover {
          background: @bg-color1;
      }

      &-icon {
        color: #fff;
        line-height: .8rem;

        i {
          font-size: 0.3rem;
        }
      }
    }
}

.c7n-system-setting-infoForm {
    .c7n-pro-select-box {
        label {
            margin-right: .6rem;
        }
    }
    form {
        table {
            tbody {
                tr:first-child {
                    td {
                        label {
                            display: none;
                        }
                        .c7n-pro-field-wrapper {
                            height: 100px;
                        }
                    }
                }
            }
        }

      .@{c7n-pro-prefix}-input-number:not(textarea):not(:last-child) {
        padding-right: .5rem;
      }

      .@{c7n-pro-prefix}-input-number-inner-button {
        right: .01rem;
      }
      .@{c7n-pro-prefix}-input-number-suffix {
        right: .25rem;
      }
    }

  &-suffix {
    line-height: .2rem;
    color: rgba(0, 0, 0, 0.25);
  }

  &-label {
    color: rgba(0, 0, 0, 0.6);
    font-size: .12rem;
    margin-bottom: -0.26rem;
  }
}
.c7ncd-func-form {
  .c7n-pro-field-label {
    text-align: left;
    color: @font-color;
    font-size: 14px;
  }
}