weseek__growi/packages/app/src/styles/_wiki.scss

@use './variables' as var;
@use './bootstrap/init' as bs;

// hljs
// .wiki {
//   @import 'hljs';
// }

.wiki {
  @mixin add-left-border($width) {
    &:before {
      margin-right: 0.4em;
      content: '';
      border-left: $width solid;
      opacity: 0.2;
    }
  }

  font-size: 15px;

  // @extend .text-break;
  // https://github.com/twbs/bootstrap/blob/v4.6.1/scss/utilities/_text.scss#L65-L68
  word-break: break-word !important; // Deprecated, but avoids issues with flex containers
  word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: 1.6em;
    margin-bottom: 0.8em;

    &:first-child {
      margin-top: 0;
    }
  }

  h1 {
    padding: 0.5em 0;
    margin-top: 2em;
    font-size: 1.9em;
    line-height: 1.1em;
    // style
    border-bottom: solid 1px transparent;
  }
  h2 {
    padding-bottom: 0.3em;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.225;
    // style
    border-bottom: solid 1px transparent;
  }
  h3 {
    font-size: 1.4em;
    font-weight: bold;
  }
  h4 {
    font-size: 1.35em;
    font-weight: normal;
    // style
    @include add-left-border(6px);
  }
  h5 {
    font-size: 1.25em;
    font-weight: normal;
    // style
    @include add-left-border(4px);
  }
  h6 {
    font-size: 1.2em;
    font-weight: normal;
    // style
    @include add-left-border(2px);
  }

  p {
    margin: 15px 0;
    font-weight: normal;
  }
  blockquote {
    padding: 0 20px;
    margin: 0 0 30px 0;
    font-size: 0.9em;
    color: lighten(bs.$gray-800, 35%);
    border-left: 0.3rem solid #ddd;
  }

  img {
    max-width: 100%;
    margin: 5px 0;
  }

  ul,
  ol {
    padding-left: 30px;
    margin: 20px 0;

    li {
      margin: 5px 0;
      line-height: 1.8em;

      pre {
        line-height: bs.$line-height-base;
      }
    }

    ul,
    ol {
      margin: 0;
    }
  }

  pre {
    position: relative; // for absolute positioned .code-highlighted-title
  }

  .task-list {
    .task-list-item {
      margin: 0 0.2em 0.25em -1.6em;
      list-style-type: none;
    }
    .task-list-item > .task-list {
      margin-left: 30px;
    }
    // use awesome-bootstrap-checkbox
    .task-list-item .checkbox input[type='checkbox'] {
      // layout
      + label {
        padding-left: 0.3em;
        &:before {
          margin-top: 0.4em;
        }
      }
      // styles
      cursor: default;
      + label {
        cursor: default;
        opacity: 1;
        &:before,
        &:after {
          cursor: default;
        }
      }
    }
  }

  $ratio: 0.95;
  &.comment {
    font-size: 14px;
    line-height: 1.5em;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      margin-top: 1.6em * $ratio;
      margin-bottom: 0.8em * $ratio;

      &:first-child {
        margin-top: 15px;
      }
    }

    h1 {
      padding-bottom: 0.3em * $ratio;
      margin-top: 2em * $ratio;
      font-size: 1.8em * $ratio;
      line-height: 1.1em * $ratio;
    }
    h2 {
      padding-bottom: 0.5em * $ratio;
      font-size: 1.4em * $ratio;
      line-height: 1.225 * $ratio;
    }
    h3 {
      font-size: 1.2em * $ratio;
    }

    blockquote {
      font-size: 0.9em * $ratio;
    }

    ul,
    ol {
      padding-left: 15px;
      margin: 10px 0;

      li {
        line-height: bs.$line-height-base;
        pre {
          line-height: bs.$line-height-base;
        }
      }
    }

    .revision-head {
      .revision-head-link,
      .revision-head-edit-button {
        margin-left: 0.5em * $ratio;
        font-size: 0.6em * $ratio;
      }
    }
  }

  .grw-keep {
    padding: 7%;
    padding-bottom: 3%;
    margin: 0 7%;
    background-color: rgba(200, 200, 200, 0.2);
    border-radius: 10px;

    .grw-keep-time {
      float: right;
      font-size: 0.8em;
      font-weight: normal;
    }
  }
}

// mobile
.page-mobile .wiki .revision-head {
  .revision-head-link,
  .revision-head-edit-button {
    opacity: 0.3;
  }
}

@include bs.media-breakpoint-down(sm) {
  .main .wiki {
    img {
      max-width: 100%;
    }
  }
}