Retrospring/app/views/user/theme.css.scss.erb

// TODO: Use canonical colours rather than this test midnight scheme.

// LEGEND

// TYPE_COLOR:  BACKGROUND COLOR
// TYPE_BORDER: BORDER COLOR
// TYPE_TEXT:   TEXT COLOR

// PRIMARY COLOR

$primary_color:  <%= @primary_color  || "#222222" %>;
$primary_border: <%= @primary_border || "#151515" %>;
$primary_text:   <%= @primary_text   || "#eeeeee" %>;

// DANGER COLOR

$danger_color:  <%= @danger_color  || "#222222" %>;
$danger_border: <%= @danger_border || "#151515" %>;
$danger_text:   <%= @danger_text   || "#eeeeee" %>;

// SUCCESS COLOR

$success_color:  <%= @success_color  || "#222222" %>;
$success_border: <%= @success_border || "#151515" %>;
$success_text:   <%= @success_text   || "#eeeeee" %>;

// WARNING COLOR

$warning_color:  <%= @warning_color  || "#222222" %>;
$warning_border: <%= @warning_border || "#151515" %>;
$warning_text:   <%= @warning_text   || "#eeeeee" %>;

// INFO COLOR

$info_color:  <%= @info_color  || "#222222" %>;
$info_border: <%= @info_border || "#151515" %>;
$info_text:   <%= @info_text   || "#eeeeee" %>;

// DEFAULT COLOR

$default_color:  <%= @default_color  || "#222222" %>;
$default_border: <%= @default_border || "#151515" %>;
$default_text:   <%= @default_text   || "#eeeeee" %>;

// AUXILIARY COLOR

$link_color:       <%= @link_color       || "#111111" %>;
$background_color: <%= @background_color || "#555555" %>;
$background_text:  <%= @background_text  || "#eeeeee" %>;
$background_muted: <%= @background_muted || "#bbbbbb" %>;

body#version1 {
  a, {
    &, &:hover, &:active {
      color: $link_color;
    }
  }

  hr, .locales #locales-panel ul {
    border-color: $link_color;
  }

  background-color: $background_color;
  color:            $background_text;

  // Navigation

  nav.navbar {

    // Nav Dropdown

    &, .dropdown-menu {
      background-color: $primary_color;
      border-color:     $primary_border;
      color:            $primary_color;

      .media {
        color: $primary_text;
      }

      > li.divider {
        background-color: $primary_border;
      }

      > li {
        > a:hover {
          background-color: mix($primary_color, $primary_text, 90%);
        }

        a {
          &, &:hover, &:active {
            color: $primary_text;
          }
        }
      }
    }

    // Nav Links

    a {
      &, &:hover, &:active {
        color: $primary_text;
      }
    }

    li:not(.profile--image-dropdown):before {
      background-color: $primary_text;
    }
  }

  // Notifications

  .media, #notifications .list-group-item {
    color:      $default_text;
    background: $default_color;
  }

  // Headers

  .j2-jumbo {
    background-color: $primary_color;
    border-color:     $primary_border;
  }

  #profile--header.profile--no-header:before, .userbox--no-header:before {
    content:    "";
    position:   absolute;
    top:        0;
    left:       0;
    right:      0;
    bottom:     0;
    background: $primary_border;

    img {
      opacity: 0;
    }
  }

  .userbox--no-header, .panel-body {
    position: relative;
  }

  // Panels, and modals

  .panel, .modal-dialog {
    border-color: $default_border;

    .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content {
      color: $default_text;
    }

    *:not(input), a, a:hover, a:active {
      color: $default_text;
    }

    select {
      background-color: $default_color;
      border-color:     $default_border;
    }

    .input-group-addon {
      background: $default_color;
      border:     $default_color;
    }

    &, .panel-heading, .panel-footer, .modal-header, .modal-footer {
      background-color: mix($default_color, $default_text, 90%);
      border-color:     mix($default_color, $default_text, 85%);
    }

    .panel-body, .modal-body, .modal-content {
      background-color: $default_color;
    }
  }

  // Non-navigation dropdowns

  .dropdown-menu {
    background-color: $default_color;
    border-color:     $default_border;
    color:            $default_text;

    > li.divider {
      background-color: $default_border;
    }

    > li {
      > a:hover {
        background-color: mix($default_color, $default_text, 90%);
      }

      a {
        &, &:hover, &:active {
          color: $default_text;
        }
      }
    }
  }

  .text-muted {
    color: $background_muted;
  }

  // Tabs
  .nav-tabs {
    border-color: transparent;
    margin-top: -1px;

    li.active a, li:active a, li:hover a {
      background: mix($default_color, $default_text, 90%);
      color:      mix($default_text, $default_color, 90%);
    }
  }

  // Lists

  .list-group .list-group-item {
    background-color: $default_color;
    color:            $default_text;
    border-color:     $default_border;

    .badge {
      background-color: $default_text;
      border-color:     $default_border;
      color:            $default_color;
    }

    .active, &:hover {
      background-color: $primary_color;
      color:            $primary_text;
      border-color:     $primary_border;

      .badge {
        background-color: $primary_text;
        border-color:     $primary_border;
        color:            $primary_color;
      }
    }
  }

  // ERB magic for generics because i'm lazy.
<%
for color in %W(primary danger success warning info default)
%>
  .btn-<%= color %>, .alert-<%= color %>, .label-<%= color %>, .panel-badge-<%= color %>, .badge-<%= color %>, .list-group-item-<%= color %> {
    color:            $<%= color %>_text !important;
    background-color: $<%= color %>_color !important;
    border-color:     $<%= color %>_border !important;

    .badge {
      color:            $<%= color %>_color !important;
      background-color: $<%= color %>_text !important;
      border-color:     $<%= color %>_border !important;
    }
  }

  .btn-<%= color %>:hover {
    background-color: mix($<%= color %>_color, $<%= color %>_text, 90%) !important;
  }
<%
end
%>

  // Reset debug
  #debug {
    background: white;
    color:      black;
  }
}

/* nprogress */
$nprogress-color: lighten($primary_color, 25%);

#nprogress {
  .bar {
    background: $nprogress-color;
  }

  .peg {
    box-shadow: 0 0 10px $nprogress-color, 0 0 5px $nprogress-color;
  }

  .spinner-icon {
    border-top-color:  $nprogress-color;
    border-left-color: $nprogress-color;
  }
}