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

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

// TODO: "new" notifications
// TODO: notification page
// TODO: tabs
// TODO: pill lists

// 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" %>;

// PANEL COLORS

// 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;

  nav.navbar {
    &, .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;
          }
        }
      }
    }

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

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

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

  .media {
    color: $default_text;
  }

  #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;
  }

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

    .panel-heading, .panel-footer, .panel-body, .modal-header, .modal-footer, .modal-body, .modal-content {
      &, *: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;
    }
  }

  .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;
        }
      }
    }
  }

  .btn-primary {
    background-color: $primary_color;
    border-color:     $primary_border;
    color:            $primary_text;

    &:hover {
      background-color: $primary_border;
    }
  }

  .text-muted {
    color: $background_muted;
  }

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

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

  #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;
  }
}