/* repository: code / main */

.repository {
  .header-wrapper {
    background-color: rgb(70, 70, 105);
    .repo-header {
      .repo-title {
        a {
          color: rgb(245, 245, 255);
        }
        .divider {
          color: rgb(215, 215, 225);
        }
      }
      .repo-buttons {
        .button {
          color: rgb(215, 215, 225);
          background: rgb(60, 60, 90);
          &:hover {
            color: rgb(255, 255, 255);
          }
        }
        .label {
          background: rgb(90, 90, 135);
          color: rgb(215, 215, 225);
          &:hover {
            color: rgb(255, 255, 255);
          }
        }
      }
    }
    .tabs {
      .item {
        color: rgb(215, 215, 225);
        transition: color .2s;
        &:hover {
          color: rgb(255, 255, 255);
        }
        &.active {
          background: rgb(60, 60, 90);
          border: 0;
          color: rgb(245, 245, 255);
          span.label {
            background: rgb(50, 50, 75);
          }
        }
        span.label {
          background: rgb(60, 60, 90);
        }
      }
    }
  }
  .container {
    .repo-description {
      color: rgb(245, 245, 255);
      a {
        color: rgb(215, 215, 225);
        &:hover {
          color: rgb(255, 130, 130);
        }
      }
    }
    #repo-topics {
      .repo-topic.label {
        background: rgb(60, 60, 90);
        color: rgb(245, 245, 255);
        &:hover {
          background: rgb(70, 70, 105);
          color: rgb(255, 255, 255);
        }
      }
    }
    .repo-topic-edit {
      display: none !important;
      &.success, 
      &.error {
        display: flex !important;
      }
    }
    .repository-summary {
      border: 0;
      .repository-menu {
        background: rgb(50, 50, 75);
        .item {
          a {
            color: rgb(245, 245, 255) !important;
            &:hover {
              color: rgb(255, 255, 255) !important;
            }
          }
        }
      }
      .language-stats-details {
        display: block !important;
      }
    }
    .secondary.menu {
      .item {
        .blue.buttons {
          .button {
            background: rgb(60, 60, 90);
            box-shadow: none;
            color: rgb(245, 245, 255);
            &:hover {
              background: rgb(50, 50, 75);
            }
          }
        }
        #clone-panel {
          #repo-clone-https, 
          #repo-clone-ssh {
            color: rgb(245, 245, 255);
            box-shadow: none !important;
            &:not(.blue) {
              background: rgb(60, 60, 90);
              &:hover {
                background: rgb(50, 50, 75);
              }
            }
            &.blue {
              box-shadow: inset 0 0 0 1px rgb(255, 130, 130) !important;
              color: rgb(255, 130, 130) !important;
            }
          }
          input#repo-clone-url {
            background: rgb(40, 40, 60);
            border: 2px solid rgb(60, 60, 90);
            color: rgb(245, 245, 255);
            &:focus {
              background: rgb(50, 50, 75);
              border: 2px solid rgb(60, 60, 90);
              color: rgb(255, 255, 255);
            }
          }
        }
        #clipboard-btn {
          background: rgb(60, 60, 90);
          &:hover {
            background: rgb(50, 50, 75);
          }
          .svg {
            fill: rgb(245, 245, 245);
          }
        }
        div.dropdown.button {
          background: rgb(60, 60, 90);
          &:hover {
            background: rgb(50, 50, 75);
          }
          .download.icon {
            color: rgb(245, 245, 255);
            .menu {
                background: rgb(60, 60, 90);
              border: 1px solid rgb(50, 50, 75);
              box-shadow: none;
              .item {
                color: rgb(245, 245, 255);
                &:hover {
                  background: rgb(50, 50, 75);
                }
              }
            }
          }
        }
      }
    }
    .header { 
      background: rgb(60, 60, 90);
      border: 0;
      color: rgb(245, 245, 255);
    }
    .table {
      color: rgb(245, 245, 255);
      border: 0;
      background: rgb(30, 30, 45);
      border-radius: 5px;
      thead {
        tr {
          &:hover {
            background: transparent !important;
          }
          th {
            background: rgb(50, 50, 75);
            color: rgb(245, 245, 255);
            .time-since {
              color: rgb(245, 245, 255);
            }
          }
        }
      }
      > thead > tr > th {
        background: rgb(50, 50, 75);
      }
      tbody {
        tr {
          background: rgb(30, 30, 45);
          border: 0;
          &:hover {
            background-color: rgb(40, 40, 60) !important;
          }
          .svg {
            &.octicon-file-directory, 
            &.octicon-file-submodule {
              fill: rgb(255, 130, 130);
            }
            &.octicon-file {
              fill: rgb(215, 215, 225);
            }
          }
          .jumpable-path {
            color: rgb(215, 215, 225) !important;
          }
        }
      }
      .commit-list {
        .sha.label {
          background: rgb(70, 70, 105);
          border: 0 !important;
          color: rgb(245, 245, 255);
          transition: background .2s, color .2s;
          &:hover {
            background: rgb(60, 60, 90);
            color: rgb(255, 255, 255);
          }
        }
      }
    }
    .non-diff-file-content {
      color: rgb(245, 245, 255);
      .header {
        background: rgb(50, 50, 75);
        color: rgb(245, 245, 255);
        border: 0;
      }
      .table {
        color: rgb(245, 245, 255);
        border: 0;
        background: rgb(30, 30, 45);
      }
    }
  }
}

/* repository: releases */

.repository.release {
  .container {
    .header {
      background: transparent;
    }
    #release-list {
      border-top: 1px solid rgb(60, 60, 90);
    }
  }
}

/* repository: activity */

.repository.commits {
  .container {
    h2.header {
      background: transparent;
      .filter {
        .button {
          background: rgb(60, 60, 90);
          color: rgb(245, 245, 255);
          &:hover {
            background: rgb(50, 50, 75);
          }
        }
        .menu {
          background: rgb(60, 60, 90);
          border: 1px solid rgb(50, 50, 75);
          box-shadow: none;
          .item {
            color: rgb(245, 245, 255);
            &:hover {
              background: rgb(50, 50, 75);
            }
          }
        }
      }
    }
    .segment {
      border: 0;
      .text {
        background: rgb(30, 30, 45);
      }
    }
  }
}

/* repository: commits */

.repository.commits {
  .secondary.menu {
    margin-left: -15px;
    .item {
      .button {
        background: rgb(60, 60, 90);
        color: rgb(245, 245, 255);
        &:hover {
          background: rgb(50, 50, 75);
        }
      }
    }
  }
  .header {
    form {
      .search.input {
        input {
          background: rgb(40, 40, 60);
          border: 0;
          color: rgb(245, 245, 255);
          &:focus {
            background: rgb(50, 50, 75);
            color: rgb(255, 255, 255);
          }
        }
      }
      .checkbox {
        label {
          color: rgb(245, 245, 255);
        }
      }
    }
  }
}

/* repository: branches */

.repository.branches {
  .container {
    .table {
      tbody {
        tr {
          &:hover {
            background: rgb(30, 30, 45);
          }
          td {
            .info {
              color: rgb(245, 245, 255);
              .svg {
                fill: rgb(245, 245, 255);
              }
            }
            .dropdown.button {
              .download.icon {
                color: rgb(245, 245, 255);
              }
            }
          }
        }
      }
    }
  }
}

/* repository: diff */

.repository.diff {
  .container {
    .top.info {
      background: rgb(60, 60, 90) !important;
      border: 0;
      color: rgb(245, 245, 255);
      .button {
        background: rgb(80, 80, 120);
        box-shadow: none;
        color: rgb(245, 245, 255);
        &:hover {
          background: rgb(70, 70, 105);
        }
      }
      .text.grey {
        color: rgb(215, 215, 225) !important;
      }
    }
    .info {
      background: rgb(50, 50, 75);
      border: 0;
      color: rgb(245, 245, 255);
      .text.grey {
        .time-since {
          color: rgb(215, 215, 225) !important;
        }
      }
      .sha.label {
        background: rgb(70, 70, 105);
        border: 0 !important;
        color: rgb(245, 245, 255);
        transition: background .2s, color .2s;
        &:hover {
          background: rgb(60, 60, 90);
          color: rgb(255, 255, 255);
        }
      }
    }
    .diff-detail-box {
      background: rgb(50, 50, 75);
      color: rgb(245, 245, 255);
      padding: 10px;
      .button {
        background: rgb(70, 70, 105);
        color: rgb(245, 245, 255);
        &:hover {
          background: rgb(60, 60, 90);
        }
        .menu {
          background: rgb(70, 70, 105);
          border: 1px solid rgb(60, 60, 90);
          box-shadow: none;
          .item {
            color: rgb(245, 245, 255);
            &:hover {
              background: rgb(60, 60, 90);
            }
          }
        }
      }
    }
    .diff-file-box {
      .diff-file-header {
        .diff-counter {
          .bar {
            background: rgb(255, 130, 130);
          }
        }
        .file {
          color: rgb(245, 245, 255);
        }
        .button {
          background: rgb(80, 80, 120);
          box-shadow: none;
          color: rgb(245, 245, 255);
          &:hover {
            background: rgb(70, 70, 105);
          }
        }
      }
      .diff-file-body {
        .file-body {
          table {
            tbody {
              .tag-code {
                td {
                  background: rgb(30, 30, 45) !important;
                  border-color: rgb(60, 60, 90) !important;
                  color: rgb(255, 255, 255);
                }
              }
              .same-code {
                td {
                  background: rgb(30, 30, 45) !important;
                  border-color: rgb(60, 60, 90) !important;
                  color: rgb(255, 255, 255);
                }
              }
              .del-code {
                td {
                  background: rgb(255, 130, 130) !important;
                  border-color: rgb(255, 100, 100) !important;
                  color: rgb(255, 255, 255);
                  .removed-code {
                    background: rgb(255, 100, 100);
                  }
                }
              }
              .add-code {
                td {
                  background: rgb(130, 220, 150) !important;
                  border-color: rgb(100, 220, 120) !important;
                  color: rgb(255, 255, 255);
                  .added-code {
                    background: rgb(80, 200, 120);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* repository: files */

.repository.file {
  .container {
    .secondary.menu {
      .item {
        .repo-path {
          a {
            color: rgb(215, 215, 225);
            &:hover {
              color: rgb(255, 130, 130);
            }
          }
          .divider {
            color: rgb(215, 215, 225);
          }
          .active.section {
            color: rgb(255, 255, 255);
          }
        }
      }
    }
    .non-diff-file-content {
      .file-header {
        .file-header-left {
          .file-info {
            color: rgb(215, 215, 225) !important;
          }
        }
        .file-header-right {
          .file-actions {
            a {
              .btn-octicon {
                .svg {
                  fill: rgb(215, 215, 225);
                  transition: fill .2s;
                  &:hover {
                    fill: rgb(255, 255, 255);
                  }
                }
              }
            }
            .buttons {
              .button {
                background: rgb(70, 70, 105);
                box-shadow: none;
                color: rgb(245, 245, 255);
                &:hover {
                  background: rgb(60, 60, 90);
                }
              }
            }
          }
        }
      }
      .table {
        .file-view.code-view {
          table {
            tbody {
              tr {
                td, 
                td pre code .linenums {
                  background: rgb(30, 30, 45) !important;
                  border-color: rgb(60, 60, 90) !important;
                  color: rgb(255, 255, 255);
                }
              }
            }
          }
        }
      }
    }
  }
}