/* repository: code / main */

.repository {
  .header-wrapper {
    background-color: rgb(70, 70, 105);
    .repo-header {
      .repo-title {
        a {
          color: rgb(245, 245, 255);
          &:hover {
            color: rgb(255, 130, 130);
          }
        }
        .divider {
          color: rgb(215, 215, 225);
        }
        .svg.octicon-repo {
          display: none;
        }
      }
      .repo-buttons {
        @if $singleuser == true {
          display: none;
        }
        .button {
          background: rgb(60, 60, 90);
          box-shadow: none;
          color: rgb(245, 245, 255);
          transition: background .2s, color .2s;
          font-family: $font-family;
          &:hover {
            background: rgb(50, 50, 75);
            color: rgb(255, 255, 255);
          }
        }
        .label {
          background: rgb(50, 50, 75);
          box-shadow: none;
          color: rgb(245, 245, 255);
          transition: background .2s, color .2s;
          &:hover {
            background: rgb(40, 40, 60);
            color: rgb(255, 255, 255);
          }
        }
      }
    }
    .tabs {
      &.container {
        .menu.navbar {
          .item {
            border-bottom: 2px solid transparent;
            border-radius: $border-radius $border-radius 0 0;
            color: rgb(215, 215, 225);
            transition: background .2s, color .2s;
            font-family: $font-family;
            &:hover {
              background: rgb(60, 60, 90) !important;
              color: rgb(255, 255, 255);
            }
            &.active {
              background: transparent;
              border: 0;
              border-bottom: 2px solid;
              color: rgb(245, 245, 255);
            }
            svg {
              @if $nojavascript == true {
                display: none;
              }
            }
            span.label {
              background: rgb(245, 245, 255);
              color: rgb(60, 60, 90);
            }
          }
        }
      }
      &.divider {}
    }
  }
  .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;
      box-shadow: none;
      @if $nojavascript == true {
        height: initial;
        overflow: auto;
      }
      .repository-menu {
        background: rgb(60, 60, 90) !important;
        .item {
          a {
            color: rgb(245, 245, 255) !important;
            &:hover {
              color: rgb(255, 255, 255) !important;
            }
            svg {
              @if $nojavascript == true {
                display: none;
              }
            }
          }
        }
      }
      .language-stats-details {
        @if $nojavascript == true {
          background: rgb(50, 50, 75);
          padding: 0;
        }
        .horizontal.list {
          .item {
            padding: 10px;
            @if $nojavascript == true {
              border-radius: 0;
            }
            .color-icon {
              @if $nojavascript == true {
                display: none;
              }
            }
            span {
              @if $nojavascript == true {
                color: rgb(245, 245, 255);
              }
            }
          }
        }
      }
      .language-stats {
        @if $nojavascript == true {
          display: none;
        }
      }
    }
    .secondary.menu {
      .item {
        &.choose.reference {
          @if $nojavascript == true {
            display: none;
          }
        }
        .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;
            font-family: $font-family;
            &: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);
            font-family: $font-family;
            &: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);
          @if $nojavascript == true {
            display: none;
          }
          &: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);
            .menu {
              background: rgb(60, 60, 90);
              border: 1px solid rgb(50, 50, 75);
              box-shadow: none;
              @if $nojavascript == true {
                display: block !important;
              }
              .item {
                color: rgb(245, 245, 255) !important;
                &: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 {
      background: rgb(30, 30, 45);
      border: 0;
      border-radius: 5px;
      color: rgb(245, 245, 255);
      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);
              @if $nojavascript == true {
                background: rgb(255, 130, 130);
                border-radius: 0 1px 2px 2px;
                box-shadow: -4px -7px 0px -4px rgb(255, 130, 130);
                height: 10px;
                margin-left: 5px !important;
                margin-top: 4px;
                width: 14px;
              }
            }
            &.octicon-file {
              fill: rgb(215, 215, 225);
              @if $nojavascript == true {
                border: 1px solid rgb(215, 215, 225);
                border-radius: 0 5px 0 0;
                height: 13px;
                margin-left: 7px !important;
                margin-right: 6px !important;
                width: 10px;
              }
            }
          }
          .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);
        border: 0;
        color: rgb(245, 245, 255);
        font-family: $font-family;
      }
      .table {
        background: rgb(30, 30, 45);
        border: 0;
        color: rgb(245, 245, 255);
      }
    }
  }
}

/* repository: issues */

.repository {
  .container {
    .grid {
      .column {
        .left.small.menu {
          background: transparent;
          border: 0;
          .item {
            background: rgb(60, 60, 90);
            color: rgb(245, 245, 255);
            &:first-child {
              border-radius: $border-radius 0 0 $border-radius;
            }
            &:hover {
              background: rgb(50, 50, 75);
            }
            &:last-child {
              border-radius: 0 $border-radius $border-radius 0;
            }
          }
        }
        form.form {
          .input {
            input {
              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);
              }
            }
            .button {
              background: rgb(60, 60, 90);
              border: 0;
              &:hover {
                background: rgb(50, 50, 75);
              }
            }
          }
        }
        .green.button {
          background: rgb(100, 200, 130);
          box-shadow: none;
          color: rgb(255, 255, 255);
          &:hover {
            background: rgb(80, 180, 110);
          }
          &[href*="issues/new"] {
            @if $type == frontend {
              display: none;
            }
          }
        }
      }
    }
    .ui.divider {
      border: 0;
      border-top: 1px solid rgb(60, 60, 90);
    }
    .grid {
      .column {
        .basic.button {
          &:not(.active) {
            background: rgb(60, 60, 90);
            color: rgb(245, 245, 255);
            &:hover {
              background: rgb(50, 50, 75);
            }
          }
          &.red {
            background: rgb(255, 130, 130);
            box-shadow: none;
            color: rgb(255, 255, 255);
            &:hover {
              background: rgb(235, 110, 110);
            }
          }
          .svg {
            @if $nojavascript == true {
              display: none;
            }
          }
        }
        .filter.menu {
          .item {
            background: rgb(60, 60, 90);
            color: rgb(245, 245, 255);
            &:first-of-type {
              margin-left: auto;
            }
            &:hover {
              background: rgb(50, 50, 75);
              .menu {
                @if $nojavascript == true {
                  display: block;
                }
              }
            }
            &.label-filter {
              .menu {
                .info {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
                .item {
                  &.label-filter-item {
                    @if $nojavascript == true {
                      padding-left: 25px !important;
                    }
                  }
                  .label.color {
                    @if $nojavascript == true {
                      display: none;
                    }
                  }
                }
              }
            }
            .menu {
              background: rgb(60, 60, 90);
              border: 1px solid rgb(50, 50, 75);
              box-shadow: none;
              margin-top: 0;
              .item {
                color: rgb(245, 245, 255) !important;
                &:hover {
                  background: rgb(50, 50, 75);
                }
              }
            }
          }
        }
      }
    }
    .issue.list {
      .item {
        border-bottom: 1px dashed rgb(70, 70, 105);
        .label {
          background: rgb(245, 245, 255);
          color: rgb(60, 60, 90);
        }
        .title {
          border-bottom: 1px solid transparent;
          color: rgb(245, 245, 255);
          transition: border .2s, color .2s;
          &:hover {
            border-bottom: 1px solid rgb(255, 130, 130);
            color: rgb(255, 130, 130);
          }
        }
        .desc {
          color: rgb(215, 215, 225);
        }
      }
    }
  }
}

/* repository: issues view issue */

.repository.view.issue {
  .container {
    div {
      .grid {
        .column {
          &.title {
            .grid {
              h1 {
                .index {
                  color: rgb(215, 215, 225);
                }
                #issue-title {
                  color: rgb(255, 255, 255);
                }
                #edit-title-input {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
              }
            }
            .label.green {
              background: rgb(100, 200, 130);
              .svg {
                @if $nojavascript == true {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* repository: releases */

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

/* repository: activity */

.repository.commits {
  .container {
    h2.header {
      font-family: $font-family;
      background: transparent;
      .filter {
        &:hover {
          .menu {
            @if $nojavascript == true {
              display: block;
            }
          }
        }
        .button {
          background: rgb(60, 60, 90);
          color: rgb(245, 245, 255);
          font-family: $font-family;
          &: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 {
      background: rgb(30, 30, 45);
      border: 0;
      .text {
        background: rgb(30, 30, 45);
      }
      h4.header { // »There has not been any commit activity in this period.«
        background: rgb(30, 30, 45);
      }
      #app {
        @if $nojavascript == true {
          display: none;
        }
      }
    }
  }
}

/* repository: commits */

.repository.commits {
  .container {
    .secondary.menu {
      @if $nojavascript == false {
        margin-left: -15px;
      }
      .item {
        .button {
          background: rgb(60, 60, 90);
          color: rgb(245, 245, 255);
          &:hover {
            background: rgb(50, 50, 75);
          }
          .text {
            @if $nojavascript == true {
              display: none;
            }
          }
        }
      }
    }
    .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);
        }
      }
    }
    div {
      .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 {
              @if $nojavascript == true {
                display: block;
              }
            }
          }
          &.dropdown {
            @if $nojavascript == true {
              padding-right: 37px;
              &::after {
                content: '⏷';
                position: absolute;
                right: 17px;
                top: 10px;
                font-size: 11px;
                color: rgb(215, 215, 225);
              }
            }
          }
          .dropdown.icon {
            @if $nojavascript == true {
              display: none;
            }
          }
          .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);
              }
              &[data-target*="#diff-files"] {
                @if $nojavascript == true {
                  display: none;
                }
              }
            }
          }
        }
        &.diff-stats {
          @if $nojavascript == true {
            display: block;
          }
        }
      }
      .diff-stats.detail-files {
        background: rgb(30, 30, 45);
        border-radius: 0 0 5px 5px;
        margin: 0 0 10px 0;
        li {
          border-bottom: 1px dashed rgb(60, 60, 90);
          &:last-of-type {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
          }
          .diff-counter {
            .add {
              color: rgb(100, 200, 130);
            }
            .del {
              color: rgb(255, 130, 130);
            }
          }
        }
      }
      .diff-file-box {
        .diff-file-header {
          .diff-counter {
            .bar {
              background: rgb(255, 130, 130);
              .pull-left.add {
                background: rgb(100, 200, 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, 110, 110);
                    }
                  }
                }
                .add-code {
                  td {
                    background: rgb(100, 200, 130) !important;
                    border-color: rgb(100, 220, 120) !important;
                    color: rgb(255, 255, 255);
                    .added-code {
                      background: rgb(80, 180, 110);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 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);
                font-family: $font-family;
                &: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);
                }
              }
            }
          }
        }
      }
    }
  }
}