Add dark theme

## Features

* Show spinner when loading comments in the stream [#7170](https://github.com/diaspora/diaspora/pull/7170)

* Add a dark color theme [#7152](https://github.com/diaspora/diaspora/pull/7152)

# 0.6.1.0

// Only overriding existing selectors here, so disable some lint rules

// scss-lint:disable IdSelector, SelectorFormat, NestingDepth, SelectorDepth, QualifyingElement

body {

  .navbar.navbar-fixed-top #user_menu .dropdown-menu > li > a {

    color: $text-color;

    &:hover { color: $white; }

  }

  .publisher {

    .mentions-input-box { background-color: $gray; }

    form {

      #publisher_textarea_wrapper { background-color: $gray; }

      .btn.btn-link.question_mark:hover .entypo-cog { color: $gray-light; }

    }

    .write-preview-tabs > li.active * { color: $text-color; }

    .md-preview { background-color: $gray; }

    .md-cancel:hover .entypo-cross { color: $gray-light; }

    .publisher-buttonbar .btn.btn-link:hover i { color: $gray-light; }

  }

  .aspect_dropdown li a .text { color: $dropdown-link-color; }

  .info .tag { background-color: $gray-light; }

  .poll_form .progress {

    background-color: $gray-dark;

    .bar { background-color: $gray-light; }

  }

  .stream-element .collapsible {

    .markdown-content hr { border-top: 1px solid $hr-border; }

    .expander {

      @include linear-gradient(transparent, $gray-light, 0%, 95%);

      border-bottom: 2px solid $gray-light;

      color: $text-color;

      text-shadow: 0 0 7px $black;

    }

  }

  code,

  pre {

    background-color: $gray-dark;

    border: 1px solid $border-medium-grey;

    color: $text-color;

  }

  pre code { border: 0; }

  @import 'highlightjs/darcula';

  #single-post-content .head {

    #post-info .author { color: lighten($gray-lighter, 27%); }

    #single-post-actions i.entypo-heart.red:hover { color: $red; }

  }

  .opengraph a { color: lighten($gray-lighter, 27%); }

  .tag:hover { background-color: desaturate(darken($blue, 35%), 20%); }

  #profile_container .profile_header {

    #author_info #sharing_message.entypo-check { color: lighten($green, 10%); }

  }

  #invitationsModal #email_invitation { border-top: 1px dashed $gray-light; }

  #contacts_container #people_stream.contacts .stream-element.in_aspect {

    background-color: $state-success-bg;

    border-left: 3px solid darken($state-success-bg, 10%);

  }

  .left-navbar #tags_list {

    .as-list {

      color: $text-color;

      em {

        background-color: lighten($background-blue, 10%);

        color: $text-color;

      }

    }

    .as-result-item.active { color: $text-color; }

  }

  #faq .question {

    background-color: $gray-dark;

    a.toggle { color: $gray-lighter; }

    &.collapsed { border: 2px solid $gray-dark; }

    &.opened {

      border: 2px solid darken($green, 10%);

      h4 { background-color: darken($green, 10%); }

    }

    .answer { background-color: $gray; }

  }

  #welcome-to-diaspora { background: $orange; }

  .block-form fieldset .form-control:focus { border-color: $input-border; }

  &.page-registrations.action-new,

  &.page-registrations.action-create {

    .ball { filter: invert(100%); }

  }

  .spinner { border-color: $gray-light transparent $gray-light $gray-light; }

  // AutoSuggest CSS

  ul.as-selections {

    background-color: $framed-background;

    li.as-selection-item,

    li.as-selection-item.blur {

      background-color: $gray-dark;

      border: 1px solid $gray-darker;

      box-shadow: 0 1px 1px $gray-darker;

      color: $text-color;

      text-shadow: 0 1px 1px $gray-darker;

    }

    li.as-selection-item a.as-close,

    li.as-selection-item.blur a.as-close {

      color: $text-color;

      text-shadow: 0 1px 1px $gray-darker;

    }

    li:hover.as-selection-item {

      background-color: $light-blue;

      border-color: $brand-primary;

      color: $white;

      a.as-close { color: $gray-light; }

    }

    li.as-selection-item.selected { border-color: $brand-primary; }

    li.as-selection-item a:hover.as-close { color: $white; }

    li.as-selection-item a:active.as-close { color: $gray-lighter; }

  }

  ul.as-list {

    background-color: $gray-dark;

    box-shadow: 0 2px 12px $gray-light;

    color: $text-color;

  }

  li.as-result-item,

  li.as-message {

    border: 1px solid $gray-dark;

  }

  li.as-result-item.active {

    background-color: $brand-primary;

    border-color: $brand-primary;

    text-shadow: none;

    em { background: darken($brand-primary, 10%); }

  }

  // End AutoSuggest CSS

  // Bootstrap Switch CSS

  .bootstrap-switch {

    border-color: $border-grey;

    .bootstrap-switch-label { background: $framed-background; }

    .bootstrap-switch-handle-on.bootstrap-switch-default,

    .bootstrap-switch-handle-off.bootstrap-switch-default {

      background: $gray-dark;

      color: $text-color;

    }

  }

  // End Bootstrap Switch CSS

}

// Main color(s)

$white: #fff;

$black: #000;

$gray-base:    $black;

$gray-darker:  lighten($gray-base, 6%);

$gray-dark:    lighten($gray-base, 9.5%);

$gray:         lighten($gray-base, 13.5%);

$gray-light:   lighten($gray-base, 28%);

$gray-lighter: lighten($gray-base, 58%);

$green: #346535;

$red: #622;

$blue: #4183c4;

$yellow: #645a1b;

$orange: #664100;

$light-blue: lighten($blue, 5%);

$brand-primary: darken($blue, 5%);

$brand-success: $green;

$brand-info: darken(adjust-hue($brand-primary, -30), 15%);

$brand-danger: lighten($red, 10%);

// Bootstrap Variables

//== Scaffolding

$body-bg: $gray;

$text-color: lighten($gray-lighter, 17%);

$link-color: $blue;

//== Tables

$table-bg-accent: $gray-dark;

$table-border-color: $gray-light;

//== Buttons

$btn-default-color: $gray-lighter;

$btn-default-bg: $gray-light;

$btn-default-border: $gray-darker;

$btn-success-color: $white;

//== Forms

$input-bg: $gray-dark;

$input-color: $text-color;

$input-border: $gray-light;

$input-border-focus: $brand-primary;

$input-color-placeholder: lighten($gray-light, 7%);

$legend-color: $text-color;

$legend-border-color: $gray-light;

//== Dropdowns

$dropdown-bg: lighten($gray-base, 15%);

$dropdown-divider-bg: $gray-darker;

$dropdown-link-color: $text-color;

$dropdown-link-hover-color: $dropdown-link-color;

//== Navbar

$navbar-inverse-bg: $gray-darker;

$navbar-inverse-link-hover-color: $text-color;

$navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color;

//== Tabs

$nav-tabs-active-link-hover-bg: $gray;

$nav-tabs-active-link-hover-border-color: $gray-darker;

//== Navs

$nav-link-hover-bg: $gray-darker;

//== Pagination

$pagination-color: $light-blue;

$pagination-bg: $gray-light;

$pagination-border: $gray-darker;

$pagination-hover-color: $gray-dark;

$pagination-hover-bg: $light-blue;

$pagination-hover-border: $pagination-border;

$pagination-active-border: $pagination-border;

$pagination-disabled-color: $gray-dark;

$pagination-disabled-bg: $gray-light;

$pagination-disabled-border: $pagination-border;

//== Form states and alerts

$state-success-text: lighten($green, 30%);

$state-success-bg: darken($green, 10%);

$state-success-border: darken($state-success-bg, 20%);

$state-info-text: lighten($blue, 20%);

$state-info-bg: darken($blue, 20%);

$state-info-border: darken($state-info-bg, 20%);

$state-warning-text: lighten($yellow, 30%);

$state-warning-bg: $yellow;

$state-warning-border: darken($state-warning-bg, 20%);

$state-danger-text: lighten($red, 40%);

$state-danger-bg: $red;

$state-danger-border: darken($state-danger-bg, 20%);

//== Popovers

$popover-bg: lighten($gray, 5%);

$popover-border-color: $gray-darker;

//== Modals

$modal-content-bg: $gray;

$modal-header-border-color: $gray-light;

//== List group

$list-group-bg: $gray;

$list-group-link-color: $text-color;

//== Panels

$panel-bg: $gray;

$panel-default-text: $text-color;

$panel-default-border: $gray-darker;

$panel-default-heading-bg: $gray-dark;

//== Thumbnails

$thumbnail-border: $gray-darker;

//== Wells

$well-bg: $gray-dark;

//== Close

$close-color: $gray-lighter;

//== Type

$hr-border: $gray-light;

// Variables

$text-color-pale: $gray-light;

$text-color-active: lighten($gray-lighter, 27%);

$background-grey: $gray-dark;

$background-blue: desaturate(darken($blue, 25%), 15%);

$border-grey: $gray-darker;

$border-medium-grey: $gray-light;

$border-dark-grey: darken($border-grey, 4.5%);

$icon-color: $text-color;

$main-background: $gray-dark;

$framed-background: $gray;

$left-navbar-drawer-background: $main-background;

$hovercard-background: $gray;

@import 'color_themes/color_theme_override_dark';

@import 'mixins';

@import 'color_themes/dark/style';

@import 'application';

@import 'mixins';

@import 'color_themes/dark/style';

// Only overriding existing selectors here, so disable some lint rules

// scss-lint:disable SelectorFormat, NestingDepth, SelectorDepth

body {

  .settings-container,

  .stream-element,

  .login-form {

    border: 1px solid $border-grey;

  }

  .stream-element,

  .comments {

    .from a { color: $text-color; }

    .info { color: lighten($gray-light, 12%); }

    .nsfw-shield { background-color: $gray-light; }

    .bottom-bar {

      background: lighten($framed-background, 4.5%);

      .post-action .disabled { color: $text-color-pale; }

      .post-stats .count { background-color: lighten($framed-background, 4.5%); }

    }

    .reshare {

      border-bottom: 1px solid $border-medium-grey;

      .reshare_via span { color: $border-medium-grey; }

    }

  }

  .more-link,

  .no-more-posts {

    background: { color: $btn-default-bg; }

    border: 1px solid $gray;

    h1,

    h2 {

      color: $text-color;

      text-shadow: 0 2px 0 $gray;

    }

  }

  .stream-element.unread { background-color: $gray; }

  .stream-element.read { background-color: $gray-darker; }

  .header-full-width { border-bottom: 1px solid $border-grey; }

  .user_aspects {

    &,

    &:focus,

    &:active {

      border-color: $gray-light;

    }

    &.has_connection {

      background-color: $green;

      color: $white;

    }

  }

}

// scss-lint:enable IdSelector, SelectorFormat, NestingDepth, SelectorDepth

@import 'mobile/mobile';