wikijs/client/themes/default/scss/app.scss

/* THEME SPECIFIC STYLES */

.contents {
  color: mc('grey', '800');
  padding: 24px 0 50px;
  position: relative;

  > div > *:first-child {
    margin-top: 0;
  }

  @at-root .theme--dark & {
    background-color: darken(mc('grey', '900'), 4%);
    color: mc('grey', '300');

    a {
      color: mc('indigo', '200');
    }
  }

  // ---------------------------------
  // HEADERS
  // ---------------------------------

  h1, h2, h3, h4, h5, h6 {
    position: relative;

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

    &:hover {
      .toc-anchor {
        display: block;
      }
    }

    .toc-anchor {
      display: none;
      position: absolute;
      right: 1rem;
      bottom: .5rem;
      font-size: 1.25rem;
      text-decoration: none;
      color: mc('grey', '500');
    }

    & + h2, & + h3, & + h4, & + h5, & + h6 {
      margin-top: 8px;
    }
  }

  h1 {
    padding: 0 24px;
    color: mc('blue', '800');
    margin-top: 2rem;
    position: relative;

    @at-root .theme--dark & {
      color: mc('teal', '100');
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 2px;
      background: linear-gradient(to right, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));

      @at-root .theme--dark & {
        background: linear-gradient(to right, mc('teal', '300') 0%, mc('teal', '500') 10%, rgba(mc('teal', '900'), 0) 100%);
      }

      @at-root .application--is-rtl & {
        background: linear-gradient(to left, mc('theme', 'primary'), rgba(mc('theme', 'primary'), 0));
      }
      @at-root .theme--dark.application--is-rtl & {
        background: linear-gradient(to left, mc('grey', '600'), rgba(mc('grey', '600'), 0));
      }
    }
  }
  h2 {
    margin: 1rem 24px 0 24px;
    padding: 8px 0 0 0;
    color: mc('grey', '800');
    position: relative;

    @at-root .theme--dark & {
      color: mc('grey', '400');
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, mc('grey', '700'), rgba(mc('grey', '700'), 0));

      @at-root .theme--dark & {
        background: linear-gradient(to right, mc('grey', '300'), rgba(mc('grey', '700'), 0));
      }

      @at-root .application--is-rtl & {
        background: linear-gradient(to left, mc('grey', '700'), rgba(mc('grey', '700'), 0));
      }
      @at-root .theme--dark.application--is-rtl & {
        background: linear-gradient(to left, mc('grey', '300'), rgba(mc('grey', '700'), 0));
      }
    }
  }
  h3 {
    margin: 0 24px;
    padding: 8px 0 0 0;
    color: mc('grey', '700');
    position: relative;

    @at-root .theme--dark & {
      color: mc('grey', '600');
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 90%);
    }
  }
  h4, h5, h6 {
    font-size: 1rem;
    margin: 0 24px;
    padding: 8px 0 0 0;
    color: mc('grey', '700');
    position: relative;

    @at-root .theme--dark & {
      color: mc('grey', '600');
    }

    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 70%);
    }
  }
  h5 {
    &::after {
      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 50%);
    }
  }
  h6 {
    &::after {
      background: linear-gradient(to right, mc('grey', '500'), rgba(mc('grey', '500'), 0) 30%);
    }
  }

  // ---------------------------------
  // PARAGRAPHS
  // ---------------------------------

  p {
    padding: 1rem 24px 0 24px;
    margin: 0;
    text-align: justify;

    @at-root .contents > div > p:first-child {
      padding-top: 0;
    }
  }

  hr {
    margin: 1rem;
    height: 1px;
    border: none;
    background-color: mc('grey', '400');

    @at-root .theme--dark & {
      background-color: mc('grey', '700');
    }
  }

  .emoji {
    height: 1.25em;
    margin: 0 1px -4px;
  }

  blockquote {
    padding: 0 0 1rem 0;
    border-left: 5px solid mc('blue', '500');
    border-radius: .5rem;
    margin: 1rem 2rem;

    > p:first-child .emoji {
      margin-right: .5rem;
    }

    &.valign-center > p {
      display: flex;
      align-items: center;
    }

    &.is-info {
      background-color: mc('blue', '50');
      background-image: radial-gradient(ellipse at top, mc('blue', '50'), lighten(mc('blue', '50'), 5%));
      border-color: mc('blue', '100');
      box-shadow: 0 0 2px 0 mc('blue', '100');

      code {
        background-color: mc('blue', '50');
        color: mc('blue', '800');
      }

      @at-root .theme--dark & {
        background-color: mc('grey', '900');
        background-image: radial-gradient(ellipse at top, mc('blue', '900'), rgba(darken(mc('blue', '900'), 5%), .2));
        border-color: mc('blue', '500');
        box-shadow: 0 0 2px 0 mc('grey', '900');
      }
    }
    &.is-warning {
      background-color: mc('orange', '50');
      background-image: radial-gradient(ellipse at top, mc('orange', '50'), lighten(mc('orange', '50'), 5%));
      border-color: mc('orange', '100');
      box-shadow: 0 0 2px 0 mc('orange', '100');

      code {
        background-color: mc('orange', '50');
        color: mc('orange', '800');
      }

      @at-root .theme--dark & {
        background-color: mc('grey', '900');
        background-image: radial-gradient(ellipse at top, mc('orange', '900'), rgba(darken(mc('orange', '900'), 5%), .2));
        border-color: mc('orange', '500');
        box-shadow: 0 0 2px 0 mc('grey', '900');
      }
    }
    &.is-danger {
      background-color: mc('red', '50');
      background-image: radial-gradient(ellipse at top, mc('red', '50'), lighten(mc('red', '50'), 5%));
      border-color: mc('red', '100');
      box-shadow: 0 0 2px 0 mc('red', '100');

      code {
        background-color: mc('red', '50');
        color: mc('red', '800');
      }

      @at-root .theme--dark & {
        background-color: mc('grey', '900');
        background-image: radial-gradient(ellipse at top, mc('red', '900'), rgba(darken(mc('red', '900'), 5%), .2));
        border-color: mc('red', '500');
        box-shadow: 0 0 2px 0 mc('grey', '900');
      }
    }
    &.is-success {
      background-color: mc('green', '50');
      background-image: radial-gradient(ellipse at top, mc('green', '50'), lighten(mc('green', '50'), 5%));
      border-color: mc('green', '100');
      box-shadow: 0 0 2px 0 mc('green', '100');

      code {
        background-color: mc('green', '50');
        color: mc('green', '800');
      }

      @at-root .theme--dark & {
        background-color: mc('grey', '900');
        background-image: radial-gradient(ellipse at top, mc('green', '900'), rgba(darken(mc('green', '900'), 5%), .2));
        border-color: mc('green', '500');
        box-shadow: 0 0 2px 0 mc('grey', '900');
      }
    }
  }

  // ---------------------------------
  // LISTS
  // ---------------------------------

  ol, ul {
    padding: 1rem 24px 0 24px;
    list-style-position: inside;

    li + li {
      margin-top: .5rem;
    }

    &.links-list {
      li {
        background-color: mc('grey', '50');
        background-image: linear-gradient(to bottom, #FFF, mc('grey', '50'));
        border-right: 1px solid mc('grey', '200');
        border-bottom: 1px solid mc('grey', '200');
        border-left: 5px solid mc('grey', '300');
        box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
        padding: 1rem;
        border-radius: 5px;
        font-weight: 500;

        &:hover {
          background-image: linear-gradient(to bottom, #FFF, lighten(mc('blue', '50'), 4%));
          border-left-color: mc('blue', '500');
          cursor: pointer;
        }

        &::before {
          content: '';
          display: none;
        }

        > a {
          display: block;
          text-decoration: none;
          margin: -1rem;
          padding: 1rem;

          > em {
            font-weight: 400;
            font-style: normal;
            color: mc('grey', '700');
            display: inline-block;
            padding-left: .5rem;
            border-left: 1px solid mc('grey', '300');
            margin-left: .5rem;

            &.is-block {
              display: block;
              padding-left: 0;
              margin-left: 0;
              border-left: none;
            }
          }
        }

        > em {
          font-weight: 400;
          font-style: normal;
        }

        @at-root .theme--dark & {
          background-color: mc('grey', '50');
          background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 5%), mc('grey', '900'));
          border-right: 1px solid mc('grey', '900');
          border-bottom: 1px solid mc('grey', '900');
          border-left: 5px solid mc('grey', '700');
          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);

          &:hover {
            background-image: linear-gradient(to bottom, lighten(mc('grey', '900'), 2%), darken(mc('grey', '900'), 3%));
            border-left-color: mc('indigo', '300');
            cursor: pointer;
          }
        }
      }
    }

    &.grid-list {
      margin: 1rem 24px 0 24px;
      background-color: #FFF;
      border: 1px solid mc('grey', '200');
      padding: 1px;
      display: inline-block;

      @at-root .theme--dark & {
        background-color: #000;
        border: 1px solid mc('grey', '800');
      }

      li {
        background-color: mc('grey', '50');
        padding: .6rem 1rem;
        display: block;

        &:nth-child(odd) {
          background-color: mc('grey', '100');
        }

        & + li {
          margin-top: 0;
        }

        &::before {
          content: '';
          display: none;
        }

        @at-root .theme--dark & {
          background-color: mc('grey', '900');

          &:nth-child(odd) {
            background-color: darken(mc('grey', '900'), 5%);
          }
        }
      }
    }
  }

  ul {
    list-style: none;

    > li::before {
      content: '\25b8';
      color: mc('grey', '600');
      display: inline-block;
      width: 1.35rem;
    }
  }

  // ---------------------------------
  // CODE
  // ---------------------------------

  code {
    background-color: mc('indigo', '50');
    padding: 0 5px;
    color: mc('indigo', '800');
    font-family: 'Roboto Mono', monospace;
    font-weight: normal;
    font-size: 1rem;
    box-shadow: none;

    &::before, &::after {
      display: none;
    }

    @at-root .theme--dark & {
      background-color: darken(mc('grey', '900'), 5%);
      color: mc('indigo', '100');
    }
  }

  .prismjs{
    border: none;
    border-radius: 5px;
    box-shadow: initial;
    background-color: mc('grey', '900');
    padding: 1rem 1rem 1rem 3rem;
    margin: 1rem 24px;

    @at-root .theme--dark & {
      background-color: darken(mc('grey', '900'), 5%);
    }

    > code {
      background-color: transparent;
      padding: 0;
      color: #FFF;
      box-shadow: initial;
      display: block;
      font-size: .85rem;
      font-family: 'Roboto Mono', monospace;

      &:after, &:before {
        content: initial;
        letter-spacing: initial;
      }
    }
  }

  // ---------------------------------
  // TASK LISTS
  // ---------------------------------

  .task-list-item {
    position: relative;
    list-style-type: none;

    &-checkbox[disabled] {
      display: none;

      & + label {
        padding-left: 1.5rem;
      }

      & + label::before {
        position: absolute;
        left: 0;
        top: 2px;
        content: ' ';
        display: block;
        width: 1.1rem;
        height: 1.1rem;
        background-color: #FFF;
        border: 1px solid mc('grey', '400');
        border-radius: 2px;
        font-weight: bold;
        font-size: .8rem;
        line-height: 1rem;
        text-align: center;

        @at-root .theme--dark & {
          background-color: mc('grey', '900');
          border-color: mc('grey', '700');
        }
      }

      &[checked] + label::before  {
        content: '✓';
      }
    }

    .contains-task-list {
      padding: .5rem 0 0 1.5rem;
    }
  }

  // ---------------------------------
  // TABLES
  // ---------------------------------

  table {
    margin: .5rem 1.75rem;
    border-spacing: 0;

    th {
      padding: .75rem;
      border-bottom: 2px solid mc('grey', '500');
      color: mc('grey', '600');
    }

    td {
      padding: .75rem;
    }

    tr {
      td {
        border-bottom: 1px solid mc('grey', '200');
      }
    }
  }

  // ---------------------------------
  // IMAGES
  // ---------------------------------

  img {
    max-width: 100%;

    &.align-left {
      float: left;
      margin: 0 1rem 1rem 0;
    }
    &.align-right {
      float: right;
      margin: 0 0 1rem 1rem;
    }
    &.align-center {
      display: block;
      max-width: 100%;
      margin: auto;
    }
    &.align-abstopright {
      position: absolute;
      top: calc(-90px + 1rem);
      right: 1rem;
      height: calc(90px - 2rem);
      width: auto;
    }
    &.decor-shadow {
      box-shadow: 0 3px 8px 0 rgba(116, 129, 141, 0.1);
    }
    &.decor-outline {
      border: 1px solid mc('grey', '400');
    }
  }

}