/* 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;
        border-radius: $border-radius;
        padding: 0;
        .item {
          border-bottom: 2px solid transparent;
          border-radius: 0 !important;
          border-top: 2px solid transparent;
          margin: 0;
          padding: 0;
          transition: background .2s;
          &:hover {
            background: rgb(50, 50, 75);
          }
          &.active {
            background: initial;
            border-bottom: 2px solid rgb(255, 255, 255);
            &:hover {
              background: rgb(50, 50, 75);
            }
          }
          a {
            color: rgb(245, 245, 255) !important;
            display: block;
            padding: 8px;
            svg {
              @if $nojavascript == true {
                display: none;
              }
            }
          }
        }
      }
      .language-stats-details {
        background: rgb(50, 50, 75);
        @if $nojavascript == true {
          padding: 0;
        }
        .horizontal.list {
          .item {
            @if $nojavascript == true {
              border-radius: 0;
              padding: 10px;
            }
            &:first-of-type {
              @if $nojavascript == true {
                border-right: 1px dashed rgb(70, 70, 105);
              }
            }
            .color-icon {
              @if $nojavascript == true {
                display: none;
              }
            }
            span {
              color: rgb(245, 245, 255);
              @if $nojavascript == true {
                display: flex;
                margin: 0 auto;
                width: min-content;
              }
              b {
                @if $nojavascript == true {
                  font-weight: 400;
                  margin-left: 10px;
                  order: 2;
                }
              }
            }
          }
        }
      }
      .language-stats {
        background: rgb(60, 60, 90);
        @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 {
        th {
          .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);
            }
          }
          .commit-summary {
            .commit-button {
              @if $nojavascript == true {
                display: none;
              }
            }
          }
        }
      }
    }
    .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;
                  }
                  input {
                    background: rgb(50, 50, 75);
                    color: rgb(255, 255, 255);
                  }
                }
              }
              div {
                .edit-zone {
                  .in-edit.button {
                    box-shadow: none !important;
                    color: rgb(255, 255, 255) !important;
                  }
                }
              }
            }
            .label {
              &.green {
                background: rgb(100, 200, 130);
                .svg {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
              }
              &.red {
                background: rgb(255, 130, 130);
                .svg {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
              }
            }
          }
          &.comment-list {
            .timeline {
              &::before {
                background: rgb(60, 60, 90);
                @if $nologin == true {
                  margin-bottom: 40px;
                }
              }
              .timeline-item {
                .content {
                  .header {
                    background: rgb(60, 60, 90);
                    &::after {
                      border-right-color: rgb(60, 60, 90);
                    }
                    &::before {
                      border-right-color: transparent;
                    }
                    .text.grey {
                      color: rgb(215, 215, 225) !important;
                      a {
                        color: rgb(255, 255, 255) !important;
                        &:hover {
                          color: rgb(255, 130, 130) !important;
                        }
                      }
                    }
                    .right.actions {
                      .item.action {
                        a.add-reaction,
                        a.context-menu {
                          color: rgb(255, 255, 255);
                        }
                        .menu {
                          &::after {
                            background: rgb(60, 60, 90);
                          }
                          background: rgb(60, 60, 90);
                          .header {
                            color: rgb(255, 255, 255);
                          }
                          .divider {
                            border-color: rgb(80, 80, 120);
                          }
                          .item.reaction, 
                          .item.context {
                            color: rgb(255, 255, 255);
                          }
                        }
                      }
                    }
                  }
                  .segment {
                    background: rgb(50, 50, 75);
                    border: 0;
                  }
                }
                &.event {
                  .badge {
                    background: rgb(60, 60, 90);
                    border-color: rgb(60, 60, 90);
                    .svg {
                      fill: rgb(255, 255, 255);
                    }
                  }
                  .text.grey {
                    color: rgb(215, 215, 225) !important;
                    a {
                      color: rgb(255, 255, 255) !important;
                      &:hover {
                        color: rgb(255, 130, 130) !important;
                      }
                    }
                  }
                }
                &.comment.form {
                  .content {
                    form.form {
                      &::after {
                      border-right-color: rgb(50, 50, 75);
                      }
                      &::before {
                        border-right-color: transparent;
                      }
                      .tabular.menu {
                        border-color: rgb(60, 60, 90);
                        .item {
                          border: 0;
                          color: rgb(255, 255, 255);
                          &.active {
                            background: rgb(70, 70, 105);
                            color: rgb(255, 255, 255);
                          }
                        }
                      }
                      .field { // Editor
                        .tab.active {
                          textarea.edit_area {
                            background: rgb(40, 40, 60);
                            color: rgb(255, 255, 255);
                          }
                          .editor-toolbar {
                            border: 0;
                            a {
                              &::after, 
                              &::before {
                                color: rgb(255, 255, 255);
                              }
                              &:hover {
                                background: rgb(70, 70, 105);
                                border-color: transparent;
                              }
                            }
                            i.separator {
                              border-color: rgb(70, 70, 105);
                            }
                          }
                          .CodeMirror {
                            background: rgb(40, 40, 60);
                            border: 0;
                            color: rgb(255, 255, 255);
                          }
                          .editor-statusbar {
                            color: rgb(215, 215, 225);
                          }
                        }
                      }
                      .field { // "Drop files or click here to upload"
                        .dropzone {
                          background: rgb(40, 40, 60);
                          border-color: rgb(255, 130, 130);
                          .dz-default, 
                          .dz-message {
                            .dz-button {
                              color: rgb(255, 255, 255);
                            }
                          }
                          .dz-preview {
                            background: rgb(50, 50, 75);
                            border-radius: 4px;
                            .dz-image {
                              img {
                                transition: filter .2s;
                              }
                            }
                            .dz-details {
                              color: rgb(255, 255, 255);
                              .dz-size {
                                span {
                                  background: rgb(70, 70, 105);
                                  padding: 4px 8px;
                                  border-radius: 8px;
                                }
                              }
                              .dz-filename {
                                border-radius: 4px;
                                padding: 4px 8px;
                                span {
                                  background: rgb(70, 70, 105);
                                  border: 0;
                                  border-radius: 8px;
                                  padding: 4px 8px;
                                  &:hover {
                                    background: rgb(60, 60, 90);
                                  }
                                }
                              }
                            }
                            .dz-progress {
                              .dz-upload {
                                background: rgb(40, 40, 60);
                              }
                            }
                            .dz-success-mark {
                              svg {
                                g {
                                  path {
                                    fill: rgb(100, 200, 130);
                                  }
                                }
                              }
                            }
                            .dz-error-mark {
                              svg {
                                g {
                                  g {
                                    path {
                                      fill: rgb(100, 200, 130);
                                    }
                                  }
                                }
                              }
                            }
                            .dz-remove {
                              background: rgb(60, 60, 90);
                              padding: 8px 0 4px 0;
                              transition: background .2s;
                              &:hover {
                                background: rgb(255, 130, 130);
                                color: rgb(255, 255, 255);
                                text-decoration: none;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
              .warning.message {
                @if $nologin == true {
                  display: none;
                }
              }
            }
          }
          & {
            .metas {
              background: rgb(50, 50, 75);
              .disabled {
                &.select-label,
                &.select-milestone, 
                &.select-assignees-modify {
                  opacity: 1;
                }
              }
              .watching { // Notifications: "Subscribe" / "Unsubscribe"
                @if $nologin == true {
                  display: none;
                }
                div {
                  form {
                    button {
                      background: rgb(70, 70, 105);
                      color: rgb(255, 255, 255);
                      &:hover {
                        background: rgb(60, 60, 90);
                      }
                    }
                  }
                }
              }
              .timetrack {
                div {
                  .start-add {
                    button.start {
                      background: rgb(70, 70, 105);
                      color: rgb(255, 255, 255);
                      &:hover {
                        background: rgb(60, 60, 90);
                      }
                    }
                  }
                }
              }
              #deadline-loader { // Time Tracker
                .negative.message {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
                #deadlineForm {
                  form#update-issue-deadline-form {
                    input#deadlineDate {
                      background: rgb(40, 40, 60);
                      color: rgb(255, 255, 255);
                      &:focus {
                        border-color: rgb(70, 70, 105);
                      }
                    }
                  }
                }
              }
              .depending {
                div {
                  form#addDependencyForm {
                    .action.input {
                      #new-dependency-drop-list {
                        background: rgb(40, 40, 60);
                        color: rgb(255, 255, 255);
                        &.active {
                          border-color: rgb(70, 70, 105);
                        }
                        .text {
                          color: rgb(215, 215, 225);
                        }
                        .menu {
                          background: rgb(50, 50, 75) none repeat scroll 0% 0%;
                          border-color: rgb(70, 70, 105);
                          box-shadow: none;
                          .item {
                            border-color: rgb(70, 70, 105);
                            color: rgb(255, 255, 255);
                          }
                        }
                      }
                    }
                  }
                }
              }
              .watching { // "Lock conversation"
                div {
                  button.show-modal {
                    background: rgb(70, 70, 105);
                    color: rgb(255, 255, 255);
                    &:hover {
                      background: rgb(60, 60, 90);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 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;
      h4.header { // »There has not been any commit activity in this period.«
        background: rgb(30, 30, 45);
      }
      #app {
        @if $nojavascript == true {
          display: none;
        }
      }
      .text {
        background: rgb(30, 30, 45);
        .green.text {
          color: $green !important;
          .svg.octicon-issue-opened {
            fill: $green;
          }
        }
        .red.text {
          color: $red !important;
          .svg.octicon-issue-closed {
            fill: $red;
          }
        }
      }
    }
    .divider.header {
      background: initial;
      border: 0;
      display: flex;
      &::after, 
      &::before {
        background: rgb(60, 60, 90);
        height: 1px;
        top: 7px;
      }
      &::after {
        margin-left: 10px;
      }
      &::before {
        margin-right: 10px;
      }
      span.text {
        margin: 0 5px 0 0;
        @if $nojavascript == true {
          display: none;
        }
      }
    }
    .list {
      .green.label {
        background: $green;
      }
      .red.label {
        background: $red;
      }
    }
  }
}

/* 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);
          }
        }
      }
    }
    .table {
      .very.basic.table {
        .commit-list {
          tr {
            .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);
              }
            }
            .message {
              .commit-button {
                @if $nojavascript == true {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 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 {
          .fold-code {
            @if $nojavascript == true {
              display: none;
            }
          }
          .diff-counter {
            .add {
              @if $nojavascript == true {
                color: rgb(100, 200, 130);
                margin-right: 10px;
              }
            }
            .bar {
              background: rgb(255, 130, 130);
              @if $nojavascript == true {
                display: none;
              }
              .pull-left.add {
                background: rgb(100, 200, 130);
              }
            }
            .del {
              @if $nojavascript == true {
                color: 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, 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);
                  }
                }
              }
            }
          }
          &.markdown {
            a {
              border-bottom: 1px solid;
              padding: 0 2px;
              margin: 0 -2px;
            }
            &:not(code) {
              h1,
              h2 {
                border-bottom: 1px solid rgb(60, 60, 90);
              }
              pre {
                background: rgb(40, 40, 60);
                border-radius: $border-radius;
              }
            }
          }
        }
      }
    }
  }
}