/* 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 {
        #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);
          }
        }
      }
    }
    .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(100, 100, 150) !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);
          }
        }
      }
    }
    .segment.text {
      background: rgb(30, 30, 45);
      border: 0;
    }
  }
}

/* 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;
    }
    .info {
      background: rgb(50, 50, 75);
      border: 0;
    }
  }
}