@image-link-url: '/src/assets/images/editor/icon_link_editor.png';

// 点击历史后的区域
.ant-modal-root .ant-modal-centered {
  &.history1 {
    .ant-modal {
      width: 90%;
      overflow: hidden;
    }
    .ant-modal, .ant-modal-content, .ant-modal-body {
      max-height: 90vh;
      min-height: 90vh;
      overflow: hidden;
    }
  }
}
.history1 {
  .ant-modal-content {
    padding: 0;

    .history-content-container {
      border-radius: 10px;
      display: flex;
      width: 100%;
      height: 90vh;
      padding-left: 10px;
      box-sizing: border-box;
      align-items: stretch;

      .left {
        flex: 1;
        padding: 20px;
        .left-content {
          overflow-x: hidden;
          overflow-y: auto;
          max-height: calc(90vh - 40px);
        }
        .chapter-practice, .chapter-expand, .chapter-item-section, .chapter-item-header, .chapter-gallery-container {
          margin-top: 15px;
          margin-bottom: 15px;
          &.chapter-expand-inline, &.chapter-gallery-inline {
            margin-top: 0;
            margin-bottom: 0;
          }
        }
        .table-container {
          padding: 10px;
        }
        span {
          vertical-align: middle;
        }
        table {
          border-collapse: collapse;
        }
        table th {
          font-weight: 700;
          background-color: #f5f2f0;
        }
        table th,
        table td {
          border: 1px solid #ddd;
          padding: 5px;
        }
        div[data-w-e-type=video] {
          margin: 10px;
        }
        p[data-slate-node]:not(:empty) {
          margin: 15px 10px;
        }
        p {
          line-height: 1.5;
          font-size: 16px;
          font-family: '黑体';
          margin: 15px 10px;
          img {
            height: auto;
            max-width: 100%;
          }
          > img {
            vertical-align: middle;
            + span {
              vertical-align: middle;
              padding-top: 4px;
              line-height: 1.5;
            }
          }
        }
  
        // 预览题库
        .chapter-practice {
          margin: 0 10px;
          position: relative;
          cursor: pointer;
        }
        .practice-insert-topic {
          padding: 10px 10px 30px;
          .topic_style {
            h3 {
              font-size: 16px;
              color: #333;
              line-height: 20px;
              margin-bottom: 10px;
            }
          }
          .practice-item {
            padding: 10px 0;
            .topic-choose-title {
              margin-bottom: 10px;
              .index {
                vertical-align: top;
              }
              p {
                display: inline;
                margin: 0;
              }
              img {
                max-height: 60px !important;
                max-width: 100% !important;
                width: auto !important;
                height: auto !important;
                vertical-align: middle;
              }
            }
            .topic_choose-list {
              .topic_choose-item {
                padding: 3px 3px 3px 10px;
                display: flex;
                .choose-ico {
                  flex: 0 0 20px;
                  align-items: baseline;
                  padding-top: 4px;
                  .ico {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    vertical-align: text-top;
                    background-size: cover;
                    background-repeat: no-repeat;
                    &.checkbox {
                      background-image: url('@/assets/images/editor/icon_checkbox_normal.png');
                    }
                    &.radio {
                      background-image: url('@/assets/images/editor/icon_checkbox_normal.png');
                    }
                  }
                }
              }
              .topic_content {
                margin-left: 5px;
                p {
                  margin: 0;
                  display: inline;
                  vertical-align: top;
                  img {
                    max-width: 50% !important;
                    height: auto;
                  }
                }
              }
            }
          }
        }
        pre {
          white-space: pre-wrap;
          word-break: break-all;
          word-wrap: break-word;
          line-height: 20px;
          font-size: 14px;
          padding: 10px;
          color: #333;
          background-color: #f5f2f0;
        }
  
        blockquote {
          padding: 10px;
          line-height: 20px;
          font-size: 14px;
          background-color: #f5f2f0;
          border-left: 5px solid #b4d5ff;
          margin: 10px 0;
        }
  
        a {
          color: #aa1941;
          &:link,
          &:visited,
          &:hover {
            color: #aa1941;
          }
          span {
            color: #aa1941 !important;
          }
          &::after {
            content: '';
            background-size: cover;
            background-image: url(@image-link-url); // 使用 Less 变量
            width: 14px;
            height: 14px;
            display: inline-block;
            margin: 0 5px;
            vertical-align: text-bottom;
          }
        }
  
        h1 {
          line-height: 40px;
          font-size: 24px;
        }
        h2 {
          line-height: 34px;
          font-size: 20px;
        }
        h3 {
          line-height: 28px;
          font-size: 18px;
        }
        h4 {
          line-height: 22px;
          font-size: 16px;
        }
        h5 {
          line-height: 18px;
          font-size: 14px;
        }
        h6 {
          line-height: 16px;
          font-size: 12px;
        }
        video,
        audio {
          width: 100%;
        }
        .chapter-image-pic {
          img {
            width: 100%;
            height: auto;
          }
        }
  
        .w-e-image-container {
          img {
            &:not([style]) {
              width: auto;
            }
            width: 100%;
          }
        }
  
        // 画廊
        .chapter-gallery-container {
          cursor: pointer;
          .chapter-gallery-item {
            width: 50%;
            padding: 10px;
            box-sizing: border-box;
            text-align: center;
            &.one {
              width: 100%;
            }
            p {
  
            }
            img {
              height: auto;
              width: 100%;
            }
            &.one {
              img {
                max-width: 100%;
                height: auto;
                width: 100%;
              }
            }
          }
  
          &.chapter-gallery-inline {
            display: inline-block;
            vertical-align: middle;
            cursor: pointer;
          }
        }
  
        .chapter-item-tooltip, .chapter-item-link, .chapter-gallery-inline, .chapter-expand-inline {
          text-indent: 0;
          svg {
            text-indent: 0;
          }
        }
  
        // 画廊展示
        .gallery-prview-container {
          .gallery-img {
            max-height: 300px;
            height: 300px;
            width: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            position: relative;
            text-align: center;
            justify-content: center;
            .opa {
              position: absolute;
              top: 50%;
              background-repeat: no-repeat;
              background-size: cover;
              width: 32px;
              height: 32px;
              margin-top: -16px;
              cursor: pointer;
              &.prev {
                left: 10px;
                background-image: url('@/assets/images/editor/icon_preview_prev.png');
              }
              &.next {
                right: 10px;
                background-image: url('@/assets/images/editor/icon_preview_next.png');
              }
            }
            img {
              max-width: 100%;
              max-height: 300px;
              // width: 100%;
              // height: auto;
            }
          }
  
          .controll {
            padding: 20px;
            display: flex;
            justify-content: space-between;
          }
          .steps {
            padding: 0 10px;
            text-align: right;
            color: #999;
          }
          .title {
            padding: 12px 10px;
            font-size: 20px;
            line-height: 28px;
            margin-bottom: 5px;
            border-bottom: 1px solid #f1f1f1;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
          }
          .desc {
            padding: 0 10px;
            font-size: 16px;
            line-height: 28px;
            color: #999;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
          }
        }
  
        .chapter-expand {
          margin: 0 10px;
        }
  
        // 扩展内容
        .expand-content {
          padding-bottom: 25px;
        }
  
        .img-preview {
          text-align: center;
          padding-top: 50px;
          img {
            width: 100%;
          }
        }
        
        li, dd, dt {
          font-size: 16px;
          font-family: "黑体";
          line-height: 1.5;
          margin: 15px 0;
        }
        ol {
          margin: 0 10px 0 28px;
          li {
            padding-left: 5px;
          }
        }
        ul {
          margin: 0px 10px 0 30px;
        }
  
        .preview-content-other {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow-x: hidden;
          overflow-y: auto;
          background-color: #fff;
        }
      }
      .right {
        width: 350px;
        flex: 0 0 350px;
        height: calc(100% - 20px);
        color: #333;
        background: #ffffff;
        margin: 10px 0;
        padding: 0 20px;
        border-left: 1px solid #e5e5e5;

        .top {
          display: flex;
          line-height: 42px;
          margin-bottom: 20px;
          justify-content: space-between;
          align-items: center;
          .top-left {
            font-size: 18px;
          }
          .icon {
            display: flex;
            align-items: center;
          }
        }

        .buttom {
          .son {
            padding: 12px 0 10px;
            display: flex;
            height: 70px;
            cursor: pointer;
            border-bottom: 1px solid #e5e5e5;

            &.active {
              .ant-btn {
                border-color: #ab1941;
                color: #ab1941;
              }
            }

            .left1 {
              flex: 1;
              .text {
                height: 25px;
                font-weight: 500;
                font-size: 16px;
                color: #333;
                line-height: 25px;
                text-align: left;
                font-style: normal;
              }
              .time {
                height: 20px;
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                white-space: pre-wrap;
              }
            }
            .right-btn {
              width: 70px;
              height: 28px;
              cursor: pointer;
              flex: 0 0 70px;
              text-align: right;
              .text {
                font-weight: 400;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}

.history2 {
  z-index: 1000;
  .ant-modal-content {
    padding: 20px;
  }
}
