@charset "UTF-8";

@use "../../feature/lookAndFeel/style-guide" as style;
@import "../icons/icons";

.link-broken {
  color:         $alt-link-hover-color !important;
  border-bottom: 1px dotted $alt-link-hover-color;

  &:hover {
    text-decoration: none;
  }
}

#interface {
  background: url('/img/horizontal.png') repeat-x 0 50%, url('/img/vertical.png') no-repeat 0 100%;
  margin:     17px 0;
  overflow:   hidden;
  width:      52.1%;
  float:      right;

  @include media-breakpoint-down(sm) {
    background: none;
    float:      none;
    width:      100%;
  }
}

#folder {
  border:           1px solid $card-border-color;
  background-color: #f6f6f6;

  ol {
    width:  80%;
    margin: auto;

    li {
      border:     none;
      background: none;
      padding:    2px 0 2px 20px;
      position:   relative;
      @include text-truncate();

      &:before {
        @include content-icon($icon-wiki-categories);
        left: 0;
      }

      a {
        color:     $gray-darker;
        font-size: 12px;
      }

      em {
        color: $gray-light;
      }
    }
  }
}

.card-catalog {
  h4 {
    font-size: 15px;

    a {
      color: $gray-darker;
    }
  }
}

article > header {
  h1 {
    margin-top: 0;

    @include media-breakpoint-down(md) {
      font-size: 120%;
    }
  }

  h5 {
    font-size:  14px;
    margin-top: 10px;

    a {
      color: $gray;
    }
  }
}

.text-excerpt {
  margin-bottom: 0;

  strong {
    font-size: 20px;
  }
}

.wiki-text {
  color: #333;

  @include media-breakpoint-down(md) {
    font-size: $font-size-sm;
  }

  img.img-smile {
    height: 1em;
  }
}

#box-maintain {
  margin: 13px 0 20px 0;
}

#box-author {
  blockquote {
    border:    none;
    font-size: 1.05rem;
    position:  relative;
    padding:   0 0 0 25px;
    margin:    0;

    &:before {
      @include content-icon-solid($icon-wiki-author-statement);
      left:  0;
      color: $gray-light;
    }
  }

  .img-thumbnail {
    @include media-breakpoint-down(lg) {
      display: none;
    }
  }
}

#box-authors {
  ul {
    list-style-type: none;
    margin:          0;
    padding:         0;

    li {
      border-bottom: 1px solid $gray-lighter;

      &:last-child {
        border-bottom: none;
      }

      a {
        padding:     5px 0;
        display:     block;
        font-size:   $font-size-sm;
        text-shadow: 1px 1px 1px #fff;
        color:       $gray;

        &:hover {
          text-decoration: none;
          color:           $alt-link-hover-color;
        }

        small {
          color:       lighten($gray-light, 15%);
          display:     block;
          float:       right;
          padding-top: 7px;
        }
      }
    }
  }
}

#box-comment {
  margin-bottom: 20px;

  textarea {
    resize:     vertical;
    min-height: 60px;
  }

  .form-group:last-child {
    margin-bottom: 0;
  }

  .comment {
    position: relative;

    &:after, &:before {
      right:          100%;
      top:            22px;
      border:         solid transparent;
      height:         0;
      width:          0;
      position:       absolute;
      pointer-events: none;
    }

    &:after {
      border-right-color: #fafafa;
      border-width:       8px;
      margin-top:         -8px;
    }

    &:before {
      border-right-color: $card-border-color;
      border-width:       9px;
      margin-top:         -9px;
    }

    form.comment-form {
      display: none;

      button[type="submit"] {
        margin-left: 10px;
      }
    }
  }
}

.wiki-categories {
  margin-bottom:  10px;
  vertical-align: middle;
}

#blog {
  margin-top: 20px;

  .media-heading {
    font-size: 160%;
  }

  .blog-text {
    font-size: 110%;
  }

  @include media-breakpoint-down(md) {
    .media-heading {
      font-size: 110%;
    }

    .blog-text {
      font-size: $font-size-sm;
    }
  }
}

#blog-sidebar {
  padding-top: 10px;

  h4, strong {
    color: $gray-light;
  }

  .btn-primary {
    margin-top: 10px;
  }

  p {
    margin-top: 30px;
  }
}

.wiki-log {
  strong {
    a {
      font-size: 12px;
    }
  }

  p {
    padding:   4px 0;
    margin:    0;
    font-size: 12px;
  }

  .table > tbody > tr > td {
    vertical-align: middle;
  }
}

.root-map {
  margin-top: 20px;
  padding:    0;
  font-size:  $font-size-sm;

  a {
    color: $gray;
  }

  li {
    padding: 3px 0;
  }

  .depth-1 {
    font-weight: bold;
  }

  .depth-2 {
    margin-left: 20px;
  }
}

#diff {
  ins {
    color: style.$green-500;
  }
  del {
    color: style.$red-500;
  }
}
