@ccs-design/ui/lib/ui/index.less

@default-bg-color: #f5f5f5;
@dark-card-color: #1f1f1f;

.ccs-form {
  display: flex;
  align-items: flex-start;
  padding: 5px;
  background: @default-bg-color;

  &-toolbar-source {
    background: #f4f6fc;
  }

  &-toolbar {
    flex-shrink: 0;
    width: 250px;
    height: 100%;
    overflow-y: auto;
    background: #fff;
    :global {
      .ant-card-body {
        width: 250px;
      }
    }
  }
  &-content-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
    overflow-y: auto;
    border-radius: 3px;
  }
  &-bg-lightblue {
    background-color: lightblue;
  }
  &-bg-default {
    background-color: @default-bg-color;
  }
  &-bg-ff {
    background-color: #fff;
  }
  &-bg-selected {
    background-color: #afdff5;
  }
  &-del-btn {
    position: relative;
    top: 2px;
    padding-left: 0 !important;
    color: #999;
    font-size: 20px;
    // margin: 0 8px;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: #777;
    }
    &[disabled] {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
  &-detail-tab {
    min-width: 300px;
    max-width: 300px;
    height: 100%;
    .ant-tabs-nav .ant-tabs-tab {
      border: none !important;
    }
    .ant-tabs-content-holder {
      height: 100%;
      overflow: auto;
      background-color: #fff;
    }
  }
  &-header {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 10px;
    background-color: white;
    border-right: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    border-left: 1px solid #f5f5f5;

    &-button {
      position: absolute;
      top: 7px;
      right: 10px;

      .ant-divider-vertical {
        border-left: 1px solid #cac5c5;
      }
    }
  }

  &-item {
    flex-grow: 1;
    padding-bottom: 48px;
    overflow-y: auto;
    &-imgUp {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #fafafa;
      border: 1px dashed #d9d9d9;
    }
    &-drag {
      border: 1px dashed #9e9e9e;
      > div:not(:last-child) {
        border-bottom: 1px solid #f5f5f5;
      }
    }
    &-nesting {
      margin-bottom: 5px;
      padding: 5px 0;
      &-field {
        padding: 4px 0;
        padding-left: 11px !important;
        background: #f5f5f5;
        border-radius: 3px;
      }
    }
    .ant-input[disabled] {
      background-color: #fff;
      cursor: default;
    }
    .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector {
      background: #fff !important;
      cursor: default;
    }
    .ant-input-number-disabled .ant-input-number-input {
      background: #fff;
      cursor: default;
    }
    .ant-picker.ant-picker-disabled {
      background: #fff;
      cursor: default;
    }
    .ant-picker-input > input[disabled],
    .ant-upload.ant-upload-disabled,
    .ant-select-disabled.ant-select:not(.ant-select-customize-input) .ant-select-selector input {
      cursor: default;
    }
  }

  &-footer {
    padding: 10px;
    background-color: #fff;
    border-top: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
    border-left: 1px solid #f5f5f5;
  }

  &-grid-drag {
    position: relative;
    margin: 5px;
    cursor: move;
  }
}

.dark-theme {
  .ccs-form {
    background-color: @dark-color-deep;
    &-toolbar {
      background: @dark-card-color;
    }
    &-toolbar-source {
      background: @dark-color-deep;
    }
    &-detail-tab {
      .ant-tabs-content-holder {
        height: 100%;
        overflow: auto;
        background-color: @dark-card-color;
      }
    }
    &-bg-lightblue {
      background-color: @dark-color-deep;
    }
    &-bg-default {
      background-color: @dark-color-deep;
    }
    &-bg-ff {
      background-color: @dark-color-shallow;
    }
    &-bg-selected {
      background-color: @dark-card-color;
      border: 1px solid @primary-color;
    }
    &-header {
      background-color: @dark-card-color;
      border-right: 1px solid @dark-color-deep;
      border-bottom: 1px solid @dark-color-deep;
      border-left: 1px solid @dark-color-deep;
      &-button {
        .ant-divider-vertical {
          border-left: 1px solid #607d8b;
        }
      }
    }
    &-footer {
      background-color: @dark-card-color;
      border-top: 1px solid @dark-color-deep;
      border-right: 1px solid @dark-color-deep;
      border-left: 1px solid @dark-color-deep;
    }
    &-item-imgUp {
      background-color: @dark-color-shallow;
      border: 1px dashed @dark-border-color;
    }

    &-item-drag {
      border: 1px dashed #607d8b;
      > div:not(:last-child) {
        border-bottom: 1px solid @dark-border-color;
      }
    }
    &-item-nesting {
      &-field {
        background: @dark-border-color;
      }
    }
  }
}

.ccs-form-item-detail {
  padding: 16px;

  :global {
    .ant-col-24.ant-form-item-label {
      // background-color: #f4f6fc;
      padding: 0;
      color: #606266;
      font-weight: 500;
      font-size: 16px;
      // margin-bottom: 8px;
      // padding-left: 10px;
      // margin-left: -16px;
    }

    .ant-form-item {
      margin-bottom: 5px;
    }

    .ant-form-item-label
      > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::before {
      content: none;
    }

    .ant-form-item-label > label::before {
      display: inline-block;
      margin-right: 4px;
      color: #9e9e9e !important;
      font-size: 20px !important;
      font-family: SimSun, sans-serif;
      content: '›' !important;
    }

    .ant-form-item-label
      > label.ant-form-item-required:not(.ant-form-item-required-mark-optional)::after {
      display: inline-block;
      margin-right: 4px;
      color: #ff4d4f;
      font-size: 14px;
      font-family: SimSun, sans-serif;
      line-height: 1;
      content: '*';
    }
  }
}