/* repository: code / main */

.repository {
  .header-wrapper {
    background-color: $bg70;
    .repo-header {
      .repo-title {
        a {
          color: $white;
          &:hover {
            color: $red;
          }
        }
        .divider {
          color: $white-dark;
        }
        .svg.octicon-repo {
          display: none;
        }
      }
      .repo-buttons {
        @if $singleuser == true {
          display: none;
        }
        .button {
          background: $bg60;
          box-shadow: none;
          color: $white;
          transition: background .2s, color .2s;
          font-family: $font-family;
          &:hover {
            background: $bg50;
            color: $white-light;
          }
        }
        .label {
          background: $bg50;
          box-shadow: none;
          color: $white;
          transition: background .2s, color .2s;
          &:hover {
            background: $bg40;
            color: $white-light;
          }
        }
      }
    }
    .tabs {
      &.container {
        .menu.navbar {
          .item {
            border-bottom: 2px solid transparent;
            border-radius: $border-radius $border-radius 0 0;
            color: $white-dark;
            transition: background .2s, color .2s;
            font-family: $font-family;
            &:hover {
              background: $bg60 !important;
              color: $white-light;
            }
            &.active {
              background: transparent;
              border: 0;
              border-bottom: 2px solid;
              color: $white;
            }
            svg {
              @if $nojavascript == true {
                display: none;
              }
            }
            span.label {
              background: $white;
              color: $bg60;
            }
          }
        }
      }
      &.divider {}
    }
  }
  .container {
    .repo-description {
      color: $white;
      a {
        color: $white-dark;
        &:hover {
          color: $red;
        }
      }
    }
    #repo-topics {
      .repo-topic.label {
        background: $bg60;
        color: $white;
        &:hover {
          background: $bg70;
          color: $white;
        }
      }
    }
    .repo-topic-edit {
      background: $bg50;
      @if $nojavascript == true {
        display: none !important;
      }
      &.success, 
      &.error {
        @if $nojavascript == true {
          display: flex !important;
        }
      }
      .column.fourteen {
        .field {
          .search.dropdown {
            background: $bg30;
            border-radius: $border-radius;
            &.active {
              border-color: transparent;
            }
            .label {
              background: $bg50;
              color: $white;
              i.delete.icon {
                color: $white-dark;
              }
            }
            .menu {
              background: $bg60;
              border: 0;
              .item {
                border-color: $bg80;
                color: $white;
                &:hover {
                  background: $bg50;
                }
              }
            }
          }
        }
      }
      .column.two {
        a.button {
          background: $bg70;
          color: $white;
          &:hover {
            background: $bg60;
          }
        }
      }
    }
    .repository-summary {
      border: 0;
      box-shadow: none;
      @if $nojavascript == true {
        height: initial;
        overflow: auto;
      }
      .repository-menu {
        background: $bg60 !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: $bg50;
          }
          &.active {
            background: initial;
            border-bottom: 2px solid $white;
            &:hover {
              background: $bg50;
            }
          }
          a {
            color: $white !important;
            display: block;
            padding: 8px;
            svg {
              @if $nojavascript == true {
                display: none;
              }
            }
          }
        }
      }
      .language-stats-details {
        background: $bg50;
        @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 $bg70;
              }
            }
            .color-icon {
              @if $nojavascript == true {
                display: none;
              }
            }
            span {
              color: $white;
              @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: $bg60;
        @if $nojavascript == true {
          display: none;
        }
      }
    }
    .secondary.menu {
      .item {
        &.choose.reference {
          .dropdown.floating.filter {
            @if $nojavascript == true {
              cursor: default;
            }
            .button {
              background: $bg60;
              border-radius: $border-radius;
              color: $white;
              transition: background .2s;
              @if $nojavascript == true {
                cursor: default;
              }
              &:hover {
                @if $nojavascript == false {
                  background: $bg50;
                }
              }
              span.text {
                svg {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
              }
              i.dropdown.icon {
                @if $nojavascript == true {
                  display: none;
                }
              }
            }
            .data {
              @if $nojavascript == true {
                display: none;
              }
            }
            .menu {
              background: $bg50;
              border: 0;
              margin-top: 0 !important;
              .search {
                color: $white;
                i.filter.icon {
                  opacity: 1;
                }
                input {
                  background: $bg30;
                  border: 0;
                  color: $white;
                  &::placeholder {
                    color: $white-dark;
                    opacity: 1
                  }
                  &::selection {
                    background: $bg50;
                    color: $white;
                  }
                }
              }
              .header {
                background: $bg50;
                .grid {
                  .column.two {
                    a.column.reference {
                      &:hover {
                        color: $white;
                      }
                      span.text {
                        padding: 10px 14px;
                        &:hover {
                          color: $white;
                        }
                        &.black {
                          color: $white;
                          border-bottom: 2px solid $white;
                        }
                        i.reference.tags.icon {
                          &::before {
                            font-size: 13px;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .scrolling.menu {
                .item {
                  color: $white !important;
                  transition: background .2s;
                  &:hover {
                    background: $bg40 !important;
                  }
                  &.selected {
                    background: $bg40 !important;
                  }
                }
              }
              .message {
                color: $white;
              }
            }
          }
        }
        .blue.buttons {
          .button {
            background: $bg60;
            box-shadow: none;
            color: $white;
            &:hover {
              background: $bg50;
            }
          }
        }
        #clone-panel {
          #repo-clone-https, 
          #repo-clone-ssh {
            color: $white;
            box-shadow: none !important;
            font-family: $font-family;
            &:not(.blue) {
              background: $bg60;
              &:hover {
                background: $bg50;
              }
            }
            &.blue {
              background: $red;
              color: $white !important;
            }
          }
          input#repo-clone-url {
            background: $bg40;
            border: 2px solid $bg60;
            color: $white;
            font-family: $font-family;
            &::selection {
              color: $white-dark;
              background: $bg60;
              opacity: 1
            }
            &:focus {
              background: $bg50;
              border: 2px solid $bg60;
              color: $white;
            }
          }
        }
        #clipboard-btn {
          background: $bg60;
          @if $nojavascript == true {
            display: none;
          }
          &:hover {
            background: $bg50;
          }
          .svg {
            fill: rgb(245, 245, 245);
          }
        }
        div.dropdown.button {
          background: $bg60;
          &:hover {
            background: $bg50;
            .menu {
              @if $nojavascript == true {
                display: block !important;
              }
            }
          }
          .download.icon {
            color: $white;
          }
          .menu {
            background: $bg60;
            border: 1px solid $bg50;
            box-shadow: none;
            .item {
              color: $white !important;
              &:hover {
                background: $bg50;
              }
            }
          }
        }
      }
    }
    .header { 
      background: $bg60;
      border: 0;
      color: $white;
    }
    .table {
      background: $bg30;
      border: 0;
      border-radius: 5px;
      color: $white;
      thead {
        tr {
          &:hover {
            background: transparent !important;
          }
          th {
            background: $bg50;
            color: $white;
            .time-since {
              color: $white;
            }
          }
        }
      }
      > thead > tr > th {
        background: $bg50;
      }
      tbody {
        tr {
          background: $bg30;
          border: 0;
          &:hover {
            background-color: $bg40 !important;
          }
          .svg {
            &.octicon-file-directory, 
            &.octicon-file-submodule {
              fill: $red;
              @if $nojavascript == true {
                background: $red;
                border-radius: 0 1px 2px 2px;
                box-shadow: -4px -7px 0px -4px $red;
                height: 10px;
                margin-left: 5px !important;
                margin-top: 4px;
                width: 14px;
              }
            }
            &.octicon-file {
              fill: $white-dark;
              @if $nojavascript == true {
                border: 1px solid $white-dark;
                border-radius: 0 5px 0 0;
                height: 13px;
                margin-left: 7px !important;
                margin-right: 6px !important;
                width: 10px;
              }
            }
          }
          .jumpable-path {
            color: $white-dark !important;
          }
        }
      }
      .commit-list {
        th {
          .sha.label {
            background: $bg70;
            border: 0 !important;
            color: $white;
            transition: background .2s, color .2s;
            &:hover {
              background: $bg60;
              color: $white;
            }
          }
          .commit-summary {
            .commit-button {
              @if $nojavascript == true {
                display: none;
              }
            }
          }
        }
      }
    }
    .non-diff-file-content {
      color: $white;
      .header {
        background: $bg50;
        border: 0;
        color: $white;
        font-family: $font-family;
      }
      .table {
        background: $bg30;
        border: 0;
        color: $white;
      }
    }
  }
}

/* repository: issues */

.repository {
  .container {
    .grid {
      .column {
        @include label-milestone-menu;
        @include search-issues;
        .green.button {
          background: $green;
          box-shadow: none;
          color: $white-light;
          &:hover {
            background: $green-dark;
          }
          &[href*="issues/new"] {
            @if $type == frontend {
              display: none;
            }
          }
        }
      }
    }
    .ui.divider {
      border: 0;
      border-top: 1px solid $bg60;
    }
    .grid {
      .column {
        @include open-closed-buttons;
        .filter.menu {
          @include dropdown;
          .dropdown.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;
                  }
                }
              }
            }
          }
        }
      }
    }
    @include issue-list;
  }
}

/* repository: labels */

.repository.labels {
  .container {
    .navbar {
      @include label-milestone-menu;
      .right {
        .green.new-label.button {
          background: $green;
          &:hover {
            background: $green-dark;
          }
        }
      }
    }
    h4.attached.header {
      font-family: $font-family;
      .right {
        .right.filter.menu {
          font-family: $font-family;
          .dropdown.item {
            color: $white;
            background: $bg60;
            &:hover {
              background: $bg50;
              .menu {
                @if $nojavascript == true {
                  display: block !important;
                }
              }
            }
            .menu {
              background: $bg60;
              border: 1px solid $bg50;
              box-shadow: none;
              margin-top: 0;
              .item {
                color: $white !important;
                &:hover {
                  background: $bg50;
                }
              }
            }
          }
        }
      }
    }
    .attached.segment {
      background: $bg30;
      border: 0;
      .labelspage {
        li.item {
          border-color: $bg50;
          .grid {
            .four.wide.column {
              .label {
                @if $nojavascript == true {
                  background: $bg60;
                  color: $white;
                }
                svg.octicon-tag {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
              }
            }
            .six.wide.column {
              @if $nojavascript == true {
                width: 56.25% !important;
              }
            }
            .three.wide.column {
              &:last-of-type {
                @if $nojavascript == true {
                  display: none;
                }
              }
              a {
                color: $white-light;
                &:hover {
                  color: $red;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* repository: milestones */

.repository.milestones {
  .container {
    .navbar {
      @include label-milestone-menu;
    }
    .divider {
      border-top: 1px solid $bg60;
    }
    @include open-closed-buttons;
    .filter.menu {
      .item {
        background: $bg60;
        color: $white;
        &:first-of-type {
          margin-left: auto;
        }
        &:hover {
          background: $bg50;
          .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: $bg60;
          border: 1px solid $bg50;
          box-shadow: none;
          margin-top: 0;
          .item {
            color: $white !important;
            &:hover {
              background: $bg50;
            }
          }
        }
      }
    }
    .milestone.list {
      .item {
        border-bottom: 1px dashed $bg70;
        svg.octicon-milestone {
          @if $nojavascript == true {
            display: none;
          }
        }
        a {
          color: $white-light;
          &:hover {
            color: $red;
          }
        }
        .green.progress {
          background: $bg50;
          .bar {
            background: $green;
          }
          @if $nojavascript == true {
            @for $i from 1 through 100 {
              &[data-percent*="#{$i}"] {
                .bar {
                  width: $i + 0%;
                  .progress::before {
                    content: "#{$i}%";
                  }
                }
              }
            }
          }
        }
        .meta {
          color: $white-dark;
        }
      }
    }
  }
}

/* repository: milestones view */

.repository {
  .container {
    div {
      .column {
        svg.octicon-calendar {
          @if $nojavascript == true {
            display: none;
          }
        }
      }
    }
  }
}

/* repository: issues view issue */

.repository.view.issue {
  .container {
    div {
      .grid {
        .column {
          &.title {
            .grid {
              h1 {
                .index {
                  color: $white-dark;
                }
                #issue-title {
                  color: $white;
                }
                #edit-title-input {
                  @if $nojavascript == true {
                    display: none;
                  }
                  input {
                    background: $bg50;
                    color: $white;
                  }
                }
              }
              div {
                .edit-zone {
                  .in-edit.button {
                    box-shadow: none !important;
                    color: $white !important;
                  }
                }
              }
            }
            .label {
              &.green {
                background: $green;
                .svg {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
              }
              &.red {
                background: $red;
                .svg {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
              }
            }
          }
          &.comment-list {
            .timeline {
              &::before {
                background: $bg60;
                @if $nologin == true {
                  margin-bottom: 40px;
                }
              }
              .timeline-item {
                .content {
                  .header {
                    background: $bg60;
                    &::after {
                      border-right-color: $bg60;
                    }
                    &::before {
                      border-right-color: transparent;
                    }
                    .text.grey {
                      color: $white-dark !important;
                      a {
                        color: $white !important;
                        &:hover {
                          color: $red !important;
                        }
                      }
                    }
                    .right.actions {
                      .item.action {
                        a.add-reaction,
                        a.context-menu {
                          color: $white;
                        }
                        .menu {
                          &::after {
                            background: $bg60;
                          }
                          background: $bg60;
                          .header {
                            color: $white;
                          }
                          .divider {
                            border-color: $bg80;
                          }
                          .item.reaction, 
                          .item.context {
                            color: $white;
                          }
                        }
                      }
                    }
                  }
                  .attached.segment {
                    background: $bg50;
                    border: 0;
                    .render-content {
                      pre {
                        background: $bg30;
                        border-radius: $border-radius;
                      }
                    }
                  }
                }
                &.event {
                  .badge {
                    background: $bg60;
                    border-color: $bg60;
                    .svg {
                      fill: $white;
                    }
                  }
                  .text.grey {
                    color: $white-dark !important;
                    a {
                      color: $white !important;
                      &:hover {
                        color: $red !important;
                      }
                    }
                  }
                }
                &.comment.form {
                  .content {
                    form.form {
                      background: $bg50;
                      &::after {
                      border-right-color: $bg50;
                      }
                      &::before {
                        border-right-color: transparent;
                      }
                      .tabular.menu {
                        border-color: $bg60;
                        .item {
                          border: 0;
                          color: $white;
                          &.active {
                            background: $bg70;
                            color: $white;
                          }
                        }
                      }
                      .field { // Editor
                        .tab.active {
                          textarea.edit_area {
                            background: $bg40;
                            color: $white;
                          }
                          .editor-toolbar {
                            border: 0;
                            a {
                              &::after, 
                              &::before {
                                color: $white;
                              }
                              &:hover {
                                background: $bg70;
                                border-color: transparent;
                              }
                            }
                            i.separator {
                              border-color: $bg70;
                            }
                          }
                          .CodeMirror {
                            background: $bg40;
                            border: 0;
                            color: $white;
                          }
                          .editor-statusbar {
                            color: $white-dark;
                          }
                        }
                      }
                      .field { // "Drop files or click here to upload"
                        .dropzone {
                          background: $bg40;
                          border-color: $red;
                          .dz-default, 
                          .dz-message {
                            .dz-button {
                              color: $white;
                            }
                          }
                          .dz-preview {
                            background: $bg50;
                            border-radius: 4px;
                            .dz-image {
                              img {
                                transition: filter .2s;
                              }
                            }
                            .dz-details {
                              color: $white;
                              .dz-size {
                                span {
                                  background: $bg70;
                                  padding: 4px 8px;
                                  border-radius: 8px;
                                }
                              }
                              .dz-filename {
                                border-radius: 4px;
                                padding: 4px 8px;
                                span {
                                  background: $bg70;
                                  border: 0;
                                  border-radius: 8px;
                                  padding: 4px 8px;
                                  &:hover {
                                    background: $bg60;
                                  }
                                }
                              }
                            }
                            .dz-progress {
                              .dz-upload {
                                background: $bg40;
                              }
                            }
                            .dz-success-mark {
                              svg {
                                g {
                                  path {
                                    fill: $green;
                                  }
                                }
                              }
                            }
                            .dz-error-mark {
                              svg {
                                g {
                                  g {
                                    path {
                                      fill: $green;
                                    }
                                  }
                                }
                              }
                            }
                            .dz-remove {
                              background: $bg60;
                              padding: 8px 0 4px 0;
                              transition: background .2s;
                              &:hover {
                                background: $red;
                                color: $white;
                                text-decoration: none;
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
              .warning.message {
                @if $nologin == true {
                  display: none;
                }
              }
            }
          }
          & {
            .metas {
              background: $bg50;
              .disabled {
                &.select-label,
                &.select-milestone, 
                &.select-assignees-modify {
                  opacity: 1;
                }
              }
              .watching { // Notifications: "Subscribe" / "Unsubscribe"
                @if $nologin == true {
                  display: none;
                }
                div {
                  form {
                    button {
                      background: $bg70;
                      color: $white;
                      &:hover {
                        background: $bg60;
                      }
                    }
                  }
                }
              }
              .timetrack {
                div {
                  .start-add {
                    button.start {
                      background: $bg70;
                      color: $white;
                      &:hover {
                        background: $bg60;
                      }
                    }
                  }
                }
              }
              #deadline-loader { // Time Tracker
                .negative.message {
                  @if $nojavascript == true {
                    display: none;
                  }
                }
                #deadlineForm {
                  form#update-issue-deadline-form {
                    input#deadlineDate {
                      background: $bg40;
                      color: $white;
                      &:focus {
                        border-color: $bg70;
                      }
                    }
                  }
                }
              }
              .depending {
                div {
                  form#addDependencyForm {
                    .action.input {
                      #new-dependency-drop-list {
                        background: $bg40;
                        color: $white;
                        &.active {
                          border-color: $bg70;
                        }
                        .text {
                          color: $white-dark;
                        }
                        .menu {
                          background: $bg50 none repeat scroll 0% 0%;
                          border-color: $bg70;
                          box-shadow: none;
                          .item {
                            border-color: $bg70;
                            color: $white;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .watching { // "Lock conversation"
                div {
                  button.show-modal {
                    background: $bg70;
                    color: $white;
                    &:hover {
                      background: $bg60;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* repository: releases */

.repository.release {
  .container {
    .header {
      background: transparent;
      font-family: $font-family;
    }
    #release-list {
      border-top: 1px solid $bg60;
    }
  }
}

/* repository: activity */

.repository.commits {
  .container {
    h2.header {
      font-family: $font-family;
      background: transparent;
      .filter {
        &:hover {
          .menu {
            @if $nojavascript == true {
              display: block;
            }
          }
        }
        .button {
          background: $bg60;
          color: $white;
          font-family: $font-family;
          &:hover {
            background: $bg50;
          }
        }
        .menu {
          background: $bg60;
          border: 1px solid $bg50;
          box-shadow: none;
          .item {
            color: $white;
            &:hover {
              background: $bg50;
            }
          }
        }
      }
    }
    .segment {
      background: $bg30;
      border-color: $bg50;
      border-left: 0;
      border-right: 0;
      &.horizontal.segments:last-of-type {
        border-bottom: 0;
      }
      h4.header { // »There has not been any commit activity in this period.«
        background: $bg30;
      }
      #app {
        @if $nojavascript == true {
          display: none;
        }
      }
      .text {
        background: $bg30;
        .green.text {
          color: $green !important;
          @if $nojavascript == true {
            display: none;
          }
          .svg.octicon-issue-opened {
            fill: $green;
          }
        }
        .red.text {
          color: $red !important;
          @if $nojavascript == true {
            display: none;
          }
          .svg.octicon-issue-closed {
            fill: $red;
          }
        }
      }
    }
    .divider.header {
      background: initial;
      border: 0;
      display: flex;
      &::after, 
      &::before {
        background: $bg60;
        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: settings */

.repository.settings {
  @include secondary-menu_new-menu;
  .secondary.menu.new-menu {
    margin-top: -21px !important;
  }
}

/* repository: commits */

.repository.commits {
  .container {
    .secondary.menu {
      @if $nojavascript == false {
        margin-left: -15px;
      }
      .item {
        .button {
          background: $bg60;
          color: $white;
          &:hover {
            background: $bg50;
          }
          .text {
            svg {
              @if $nojavascript == true {
                display: none;
              }
            }
          }
        }
      }
    }
    .header {
      form {
        .search.input {
          input {
            background: $bg40;
            border: 0;
            color: $white;
            &:focus {
              background: $bg50;
              color: $white;
            }
          }
        }
        .checkbox {
          label {
            color: $white;
          }
        }
      }
    }
    .table {
      .very.basic.table {
        .commit-list {
          tr {
            .sha.label {
              background: $bg70;
              border: 0 !important;
              color: $white;
              transition: background .2s, color .2s;
              &:hover {
                background: $bg60;
                color: $white;
              }
            }
            .message {
              .commit-button {
                @if $nojavascript == true {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* repository: files */

.repository.commits {
  .container {
    #git-graph-container {
      #rel-container {
        @if $nojavascript == true {
          display: none;
        }
      }
      #rev-container {
        ul#rev-list {
          li {
            code {
              a {
                color: $white;
                &:hover {
                  color: $red;
                }
              }
            }
            span {
              a {
                color: $white;
                &:hover {
                  color: $red;
                }
              }
              &.author {
                color: $white;
              }
              &.time {
                color: $white-dark;
              }
            }
          }
        }
      }
    }
  }
}

/* repository: branches */

.repository.branches {
  .container {
    .table {
      tbody {
        tr {
          &:hover {
            background: $bg30;
          }
          td {
            .info {
              color: $white;
              .svg {
                fill: $white;
              }
            }
            .dropdown.button {
              .download.icon {
                color: $white;
              }
            }
          }
        }
      }
    }
  }
}

/* repository: diff */

.repository.diff {
  .container {
    .top.info {
      background: $bg60 !important;
      border: 0;
      color: $white;
      .button {
        background: $bg80;
        box-shadow: none;
        color: $white;
        &:hover {
          background: $bg70;
        }
      }
      .text.grey {
        color: $white-dark !important;
      }
    }
    .info {
      background: $bg50;
      border: 0;
      color: $white;
      .text.grey {
        .time-since {
          color: $white-dark !important;
        }
      }
      .sha.label {
        background: $bg70;
        border: 0 !important;
        color: $white;
        transition: background .2s, color .2s;
        &:hover {
          background: $bg60;
          color: $white;
        }
      }
    }
    div {
      .diff-detail-box {
        background: $bg50;
        color: $white;
        padding: 10px;
        .button {
          background: $bg70;
          color: $white;
          &:hover {
            background: $bg60;
            .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: $white-dark;
              }
            }
          }
          .dropdown.icon {
            @if $nojavascript == true {
              display: none;
            }
          }
          .menu {
            background: $bg70;
            border: 1px solid $bg60;
            box-shadow: none;
            .item {
              color: $white;
              &:hover {
                background: $bg60;
              }
              &[data-target*="#diff-files"] {
                @if $nojavascript == true {
                  display: none;
                }
              }
            }
          }
        }
        &.diff-stats {
          @if $nojavascript == true {
            display: block;
          }
        }
      }
      .diff-stats.detail-files {
        background: $bg30;
        border-radius: 0 0 5px 5px;
        margin: 0 0 10px 0;
        li {
          border-bottom: 1px dashed $bg60;
          &:last-of-type {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
          }
          .diff-counter {
            .add {
              color: $green;
            }
            .del {
              color: $red;
            }
          }
        }
      }
      .diff-file-box {
        .diff-file-header {
          .fold-code {
            @if $nojavascript == true {
              display: none;
            }
          }
          .diff-counter {
            .add {
              @if $nojavascript == true {
                color: $green;
                margin-right: 10px;
              }
            }
            .bar {
              background: $red;
              @if $nojavascript == true {
                display: none;
              }
              .pull-left.add {
                background: $green;
              }
            }
            .del {
              @if $nojavascript == true {
                color: $red;
              }
            }
          }
          .file {
            color: $white;
          }
          .button {
            background: $bg80;
            box-shadow: none;
            color: $white;
            &:hover {
              background: $bg70;
            }
          }
        }
        .diff-file-body {
          .file-body {
            table {
              tbody {
                .tag-code {
                  td {
                    background: $bg30 !important;
                    border-color: $bg60 !important;
                    color: $white;
                  }
                }
                .same-code {
                  td {
                    background: $bg30 !important;
                    border-color: $bg60 !important;
                    color: $white;
                  }
                }
                .del-code {
                  td {
                    background: $red !important;
                    border-color: $red-light !important;
                    color: $white;
                    .removed-code {
                      background: $red-dark;
                    }
                  }
                }
                .add-code {
                  td {
                    background: $green !important;
                    border-color: $green-light !important;
                    color: $white;
                    .added-code {
                      background: $green-dark;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* repository: files */

.repository.file {
  .container {
    .secondary.menu {
      .item {
        .repo-path {
          a {
            color: $white-dark;
            &:hover {
              color: $red;
            }
          }
          .divider {
            color: $white-dark;
          }
          .active.section {
            color: $white;
          }
        }
      }
    }
    .non-diff-file-content {
      .file-header {
        .file-header-left {
          .file-info {
            color: $white-dark !important;
          }
        }
        .file-header-right {
          .file-actions {
            a {
              .btn-octicon {
                .svg {
                  fill: $white-dark;
                  transition: fill .2s;
                  &:hover {
                    fill: $white;
                  }
                }
              }
            }
            .buttons {
              .button {
                background: $bg70;
                box-shadow: none;
                color: $white;
                font-family: $font-family;
                &:hover {
                  background: $bg60;
                }
              }
            }
          }
        }
      }
      .table {
        .file-view {
          &.code-view {
            table {
              tbody {
                tr {
                  td, 
                  td pre code .linenums {
                    background: $bg30 !important;
                    border-color: $bg60 !important;
                    color: $white;
                  }
                }
              }
            }
          }
          &.markdown {
            a {
              border-bottom: 1px solid;
              padding: 0 2px;
              margin: 0 -2px;
            }
            &:not(code) {
              h1,
              h2 {
                border-bottom: 1px solid $bg60;
              }
            }
            pre {
              background: $bg40;
              border-radius: $border-radius;
              code {
                color: $white;
              }
            }
          }
        }
      }
    }
  }
}