@oceanbase/ui/lib/Highlight/index.less

The UI library based on OceanBase Design

@import '../variable.less';

@prefix: ob-highlight;

.@{prefix} {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.88);
  font-size: 14px;
  line-height: 1.5714285714285714;
  list-style: none;
  border-radius: ~'@{borderRadius}px';

  &:not(:hover) .@{prefix}-copy {
    visibility: hidden;
    opacity: 0;
  }

  @keyframes copy-button-trans {
    0% {
      opacity: 0.8;
      margin-block-start: 0;
    }
    10% {
      opacity: 0.8;
      margin-block-start: -16px;
    }
    90% {
      opacity: 0.8;
      margin-block-start: -16px;
    }
    100% {
      opacity: 0.8;
      margin-block-start: 0;
    }
  }

  .@{prefix}-json-view {
    padding: 0;

    .react-json-view {
      padding: 0.5em;
      overflow: auto;

      .icon-container svg {
        transform: translateY(5px);
      }
    }
  }

  &.@{prefix}-light {
    .react-json-view {
      background: @colorBgLayout;
    }

    .@{prefix}-light-index {
      border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
    }

    display: block;
    padding: 0.5em;
    overflow-x: auto;
    color: #383a42;
    background: @colorBgLayout;

    .hljs-comment,
    .hljs-quote {
      color: #a0a1a7;
      font-style: italic;
    }

    .hljs-doctag,
    .hljs-keyword,
    .hljs-formula {
      color: #a626a4;
    }

    .hljs-section,
    .hljs-name,
    .hljs-selector-tag,
    .hljs-deletion,
    .hljs-subst {
      color: #e45649;
    }

    .hljs-literal {
      color: #0184bb;
    }

    .hljs-string,
    .hljs-regexp,
    .hljs-addition,
    .hljs-attribute,
    .hljs-meta-string {
      color: #50a14f;
    }

    .hljs-built_in,
    .hljs-class,
    .hljs-title {
      color: #c18401;
    }

    .hljs-attr,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-type,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo,
    .hljs-number {
      color: #986801;
    }

    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title {
      color: #4078f2;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: bold;
    }

    .hljs-link {
      text-decoration: underline;
    }
  }

  .@{prefix}-index {
    box-sizing: border-box;
    width: 40px;
    min-width: 40px;
    color: #aaa;
    text-align: end;
    background: rgba(255, 255, 255, 0.03);
    user-select: none;
    padding-block: 2px;
    padding-inline: 8px;
  }
  .@{prefix}-content {
    padding-block: 2px;
    padding-inline: 8px;
  }
  .@{prefix}-copy {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 16px;
    height: 16px;
    padding: 0;
    overflow: hidden;
    border: 0;
    outline: none;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
    inset-block-start: 16px;
    inset-inline-end: 16px;

    &:hover {
      opacity: 0.8;
    }
  }
  &:not(:hover) &.@{prefix}-copy {
    visibility: hidden;
    opacity: 0;
  }

  .@{prefix}-copy-icon {
    width: 16px;
    height: 16px;
    font-size: 16px;

    &.scoll {
      animation: copy-button-trans 2s;
      animation-play-state: running;
    }
  }

  .@{prefix}-dark {
    display: block;
    padding: 0.5em;
    overflow-x: auto;
    color: #c0c5ce;
    background: #2b303b;
    border-radius: ~'@{borderRadius}px';

    &.@{prefix}-index {
      border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Ocean Comment */
    .hljs-comment,
    .hljs-quote {
      color: #65737e;
    }

    /* Ocean Red */
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-regexp,
    .hljs-deletion {
      color: #bf616a;
    }

    /* Ocean Orange */
    .hljs-number,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params,
    .hljs-meta,
    .hljs-link {
      color: #d08770;
    }

    /* Ocean Yellow */
    .hljs-attribute {
      color: #ebcb8b;
    }

    /* Ocean Green */
    .hljs-string,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-addition {
      color: #a3be8c;
    }

    /* Ocean Blue */
    .hljs-title,
    .hljs-section {
      color: #8fa1b3;
    }

    /* Ocean Purple */
    .hljs-keyword,
    .hljs-selector-tag {
      color: #b48ead;
    }

    .hljs-emphasis {
      font-style: italic;
    }

    .hljs-strong {
      font-weight: bold;
    }
  }

  &.@{prefix}-diff {
    overflow-y: auto;

    // &.@{prefix} {
    //   padding: 0;
    // }

    table {
      width: 100%;
      font-family: 'SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace';
      border-collapse: collapse;
      border-spacing: 0;

      td {
        vertical-align: top;
      }
    }

    .@{prefix}-diff-index,
    .@{prefix}-diff-mark,
    .@{prefix}-diff-code {
      padding-block: 2px;
      padding-inline: 8px;
    }

    .@{prefix}-diff-index,
    .@{prefix}-diff-mark {
      user-select: none;
    }

    .@{prefix}-diff-index {
      width: 40px;
      min-width: 40px;
      text-align: end;
      font-variant-numeric: tabular-nums;
    }

    .@{prefix}-diff-mark {
      width: 10px;
      min-width: 10px;
      text-align: center;
    }

    .@{prefix}-diff-code {
      white-space: pre-wrap;
      word-break: break-word;
    }

    // ======================= Theme =======================
    // Light
    &.@{prefix}-light {
      .@{prefix}-diff-index,
      .@{prefix}-diff-mark {
        color: #aaa;
      }

      .@{prefix}-diff-index {
        background: rgba(0, 0, 0, 0.01);
        border-inline-end: 1px solid rgba(0, 0, 0, 0.05);
        border-inline-start: 1px solid rgba(0, 0, 0, 0.1);

        &:first-child {
          border-inline-start: none;
        }
      }

      // &.@{prefix}-diff-cell {
      .@{prefix}-diff-cell-add {
        background: #e7f1e2;
        // .mix(##fafafa; 90)
        // .toHexString();
      }
      .@{prefix}-diff-cell-remove {
        background: #f6e3e4;
        // .mix(##fafafa; 90)
        // .toHexString();
      }
      .@{prefix}-diff-cell-empty {
        background: rgba(0, 0, 0, 0.03);
      }
      // }
    }

    // Dark
    &.@{prefix}-dark {
      .@{prefix}-diff-index,
      .@{prefix}-diff-mark {
        color: #aaa;
      }

      .@{prefix}-diff-index {
        background: rgba(255, 255, 255, 0.01);
        border-inline-end: 1px solid rgba(255, 255, 255, 0.05);
        border-inline-start: 1px solid rgba(255, 255, 255, 0.1);

        &:first-child {
          border-inline-start: none;
        }
      }

      .@{prefix}-diff-cell-add {
        background: #305c29;
        // .mix(#2b303b; 60)
        // .toHexString();
      }
      .@{prefix}-diff-cell-remove {
        background: #6d2431;
        // .mix(#2b303b; 60)
        // .toHexString();
      }

      .@{prefix}-diff-cell-empty {
        background: rgba(255, 255, 255, 0.03);
      }
    }
  }
}