@import '../../style/themes/default.less';

@component-prefix-cls: ~'@{qn-prefix}-log-board';
.@{component-prefix-cls} {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #302f32;
  &-log-content-header {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    padding-left: 16px;
    background: #555;
    .@{component-prefix-cls}-hide-icon {
      color: #979797;
      font-size: 12px;
      cursor: pointer;
    }
    .@{component-prefix-cls}-close-icon {
      position: absolute;
      right: 10px;
    }
  }
  &-log-content {
    position: relative;
    display: flex;
    flex: 1;
    overflow: hidden;
    .@{component-prefix-cls}-log-content-right,
    .@{component-prefix-cls}-log-content-left {
      height: 100%;
      padding: 0 15px;
      color: #fff;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      line-height: 24px;
      text-align: left;
      border-right: 1px solid rgba(229, 229, 229, 0.16);
    }
    .@{component-prefix-cls}-log-content-right {
      width: 340px;
      min-width: 0;
      height: 100%;
      padding: 10px 15px;
      overflow-y: auto;
    }
    .@{component-prefix-cls}-spin {
      position: absolute;
      top: 50%;
      left: 50%;
    }
    .@{component-prefix-cls}-log-content-left {
      flex: 1;
      min-width: 0;
      height: 100%;
      overflow-y: auto;
    }
    .@{component-prefix-cls}-log-content-html {
      font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      word-wrap: break-word;
      word-break: break-all;
    }
    .@{component-prefix-cls}-log-content-pre {
      /* Internet Explorer 5.5+ */
      overflow: auto;
      white-space: pre-wrap;

      /* css-3 */
      white-space: -moz-pre-wrap;

      /* Mozilla, since 1999 */
      white-space: -pre-wrap;

      /* Opera 4-6 */
      white-space: -o-pre-wrap;

      /* Opera 7 */
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}