screen.scss

@import 'compass/css3';
@import 'scaffold';
@import 'jquery_gritter';
@import 'twipsy';

$darkgrey:   #6a7176;           // Header color
$orange:     rgb(250,182,155);  // Estimate gauge color

// Tango icon theme pallette
// http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines
$butter-1:      #fce94f;
$butter-2:      #edd400;
$butter-3:      #c4a000;
$orange-1:      #fcaf3e;
$orange-2:      #f57900;
$orange-3:      #ce5c00;
$chocolate-1:   #e9b96e;
$chocolate-2:   #c17d11;
$chocolate-3:   #8f5902;
$chameleon-1:   #8ae234;
$chameleon-2:   #73d216;
$chameleon-3:   #4e9a06;
$sky-blue-1:    #729fcf;
$sky-blue-2:    #3465a4;
$sky-blue-3:    #204a87;
$plum-1:        #ad7fa8;
$plum-2:        #75507b;
$plum-3:        #5c3566;
$scarlet-red-1: #ef2929;
$scarlet-red-2: #cc0000;
$scarlet-red-3: #a40000;
$aluminium-1:   #eeeeec;
$aluminium-2:   #d3d7cf;
$aluminium-3:   #babdb6;
$aluminium-4:   #888a85;
$aluminium-5:   #555753;
$aluminium-6:   #2e3436;

body {
  margin: 0;
  padding: 0;
}

a img {
  border: 0;
}

#header {
  background: $darkgrey;
  @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75));
  border-bottom: 1px solid $darkgrey*0.7;
  @include box-shadow(0 1px 2px #aaaaaa);
  text-shadow: black 0 1px 0;
  position: relative;
  z-index: 900;
}

ul#primary-nav {
  text-align: right;
  background-image: url('/images/logo.png');
  background-repeat: no-repeat;
  background-position: 13px 6px;
  margin: 0;
  padding: 1em 1em 1em 40px;
  color: white;
  font-weight: bold;
}
ul#primary-nav li {
  padding: 0 0.5em;
  display: inline;
}
ul#primary-nav li a {
  color: white;
  text-decoration: none;
}
ul#primary-nav li.root {
  float: left;
  font-size: large;
}
ul#primary-nav li.secondary {
  position: relative;
  background: #333 url('/images/collapse.png') no-repeat right;
  padding: 0.4em 18px 0.4em 0.4em;
  @include border-radius(5px);
}
ul#primary-nav li.secondary ul {
  visibility: hidden;
}
ul#primary-nav li.secondary:hover ul {
  visibility: visible;
}
ul#primary-nav li.secondary ul {
  padding: 0.3em;
  position: absolute;
  left: 0; top: 1.7em;
  background-color: #333;
  @include border-radius(0 5px 5px 5px);
}
ul#primary-nav li.secondary ul li {
  white-space: nowrap;
  text-align: left;
  display: block;
}

#title_bar {
  background: #efefef;
  @include background(linear-gradient(top, #efefef, #dfe1e2));
  @include box-shadow(0 1px 2px #aaaaaa);
  text-shadow: white 0 1px 0;
  border-bottom: 1px solid #ededed;
  padding: 5px 10px 3px 10px;
  font-size: 1.0em;
  font-weight: bold;
  line-height: 140%;
  margin-bottom: 0.5em;
  color: #5e6469;
  position: relative;
  margin: 0;
  padding: 10px 1em;

  #add_story {
    @include background(url('/images/feature.png'), linear-gradient(top, $aluminium-3, $aluminium-3*0.75));
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0;
    padding: 0.2em 0.3em 0.2em 16px;
    @include border-radius(3px);
    border: 1px solid $aluminium-5;
    cursor: pointer;
    font-size: small;
    font-weight: bold;
    color: white;
    text-shadow:  $aluminium-5 0 1px 0;
    text-decoration: none;
  }
}

#title_bar h1 {
  font-size: 2em;
  margin: 0.3em 0;
}

#main {
  margin: 1em;
}

html.stories, html.stories body, html.stories div#main {
  height: 100%;
}

#column-toggles {
  float: right;
}

#column-toggles a {
  margin: none;
  padding: 3px;
  color: white;
  background-color: $darkgrey;
  @include border-radius(3px);
  text-decoration: none;
  text-shadow: none;
}

#column-toggles a.pressed {
  color: $darkgrey;
  background-color: #cecece;
}

/* stories table */
table.stories {
  width: 100%;
  height: 100%;
  border-spacing: 5px 0;
}

table.stories td {
  vertical-align: top;
  background-color: #ccc;
}

div.storycolumn {
  overflow: auto;
  padding-bottom: 80px;
}

/* Story columns headers */
table.stories th {
  background: $darkgrey;
  @include background(linear-gradient(top, $darkgrey, $darkgrey*0.75));
  color: #eee;
  padding: 0.2em;
  font-weight: bold;
  @include border-radius(5px 5px 0 0);
  a.toggle-column{
    float: right;
    padding: 0px 5px 1px;
    cursor: pointer;
    &:hover{
      color:$aluminium-3;
    }
  }
}

/* Story types */
div.story {
  padding: 0.3em;
  background-repeat: no-repeat;
  background-position: 4px 4px;
  background-color: #eee;
  border-bottom: 1px solid #ddd;
  border-top: 1px solid #fff;
}
div.story:hover {
  background-color: #ddd;
}
div.story input[type=text],
div.story textarea {
  width: 99%;
}
div.story textarea {
  height: 50px;
}

div.story-icons {
  float: left;
}
div.story-title {
  margin-left: 65px;
}
.unestimated div.story-title {
  font-style: italic;
}
div.story-title abbr.initials {
  color: green;
  font-weight: bold;
  margin-left: 0.2em;
  border: none;
}

#in_progress div.story-title,
#backlog div.story-title,
#chilly_bin div.story-title {
  cursor: move;
}

span.estimate {
  border: 1px solid #777;
  padding: 0 0.2em;
  margin: 0 2px 0 0;
  @include border-radius(3px);
  vertical-align: top;
  font-size: x-small;
  font-weight: bold;
  font-style: italic;
}

span.estimate_1 {
  @include background(linear-gradient(bottom,
      $orange 12.5%,
      white 12.5%));
}
span.estimate_2 {
  @include background(linear-gradient(bottom,
      $orange 25%,
      white 25%));
}
span.estimate_3 {
  @include background(linear-gradient(bottom,
      $orange 37.5%,
      white 37.5%));
}
span.estimate_4 {
  @include background(linear-gradient(bottom,
      $orange 50%,
      white 50%));
}
span.estimate_5 {
  @include background(linear-gradient(bottom,
      $orange 62.5%,
      white 62.5%));
}
span.estimate_6 {
  @include background(linear-gradient(bottom,
      $orange 75%,
      white 75%));
}
span.estimate_7 {
  @include background(linear-gradient(bottom,
      $orange 87.5%,
      white 87.5%));
}
span.estimate_8 {
  @include background(linear-gradient(bottom,
      $orange 100%,
      white 100%));
}

.story.release {
  background-color: #333;
  color: white;
}
.story.release:hover {
  background-color: #222;
}

/* Story action buttons */
.state-actions {
  float: right;
  margin-left: 0.2em;
}

.state-actions form div, .state-actions form {
  display: inline;
}

/* Iteration markers */
.iteration {
  background: #000 url('/images/iteration.png') no-repeat 2px center;
  color: #ddd;
  padding: 0.2em 0.2em 0.2em 20px
}
.iteration .points {
  float: right;
}

.state-actions input {
  margin: 0;
  padding: 0 0.3em;
  @include border-radius(3px);
  border: 1px solid #333;
  cursor: pointer;
  font-size: small;
  font-weight: bold;
  color: white;
  @include background(linear-gradient(top, $aluminium-3, $aluminium-3*0.75));
  border-color: $aluminium-5;
  text-shadow:  $aluminium-5 0 1px 0;
  @include box-shadow(0 1px 2px #aaaaaa);
}
.story.release .state-actions input {
  @include box-shadow(0 1px 2px #000);
}
.state-actions input:active {
  @include box-shadow(none);
}

.state-actions input.finish {
  @include background(linear-gradient(top, $sky-blue-1, $sky-blue-1*0.75));
  border-color: $sky-blue-3;
}
.state-actions input.deliver {
  @include background(linear-gradient(top, $butter-1, $butter-1*0.75));
  border-color:     $butter-3;
}
.state-actions input.accept {
  @include background(linear-gradient(top, $chameleon-2, $chameleon-2*0.75));
  border-color: $chameleon-3;
}
.state-actions input.reject {
  @include background(linear-gradient(top, $scarlet-red-1, $scarlet-red-1*0.75));
  border-color:     $scarlet-red-3;
}
.state-actions input.restart {
  @include background(url('/images/redo.png'),
                      linear-gradient(top, $scarlet-red-1, $scarlet-red-1*0.75));
  background-repeat: no-repeat;
  border-color: $scarlet-red-3;
  padding-left: 16px;
}

img.expand, img.collapse {
  cursor: pointer;
}

table#import tr.valid, .notice {
  color: white;
  background-color: $chameleon-3;
}
table#import tr.invalid, .alert {
  color: white;
  background-color: $scarlet-red-2;
}

ul#projects {
  list-style: none;
  width: 50%;
  padding-left: 0;
}

ul#projects li {
  @include background(linear-gradient(top, $aluminium-1, $aluminium-2));
  @include box-shadow(0 1px 2px #aaaaaa);
  text-shadow: white 0 1px 0;
  background-color: #d3d7cf;
  border: 1px solid $aluminium-1;
  border-top: 1px solid $aluminium-2;
  margin: 10px 0;
  padding: 10px;
}
ul#projects li:hover {
  @include background(linear-gradient(top, $aluminium-2, $aluminium-3));
}

ul#projects li h2 {
  display: inline;
}

div.project_options {
  float: right;
}

ul#projects li:hover {
  background-color: #babdb6;
}

a.button {
  @include border-radius(2px);
  @include background(linear-gradient(top, $aluminium-1, $aluminium-2));
  @include box-shadow(0 1px 2px $aluminium-2);
  border: 1px solid $aluminium-3;
  display: inline-block;
  padding: 5px;
  text-decoration: none;
  font-weight: bold;
}

a.button:hover {
  @include background(linear-gradient(top, $chameleon-2, $chameleon-3));
  color: white;
  text-decoration: underline;
}
// Popover Overrides
// Custom Style Overrides
.popover{
  p{
    margin-top:0px;
  }
  .title{
    margin:0px;
  }
  .inner{
    padding:2px ;
  }
  .content{
    padding: 10px 0px 14px;
  }
  .small{
    color:$aluminium-3;
    font-size:0.85em;
    padding-left:15px;
    margin: 0 10px 10px 0;
    .icons{
      float:right;
      .text{
        vertical-align:top;
      }
    }
  }
  .description{
    padding:10px 15px 0px;
  }
}

.clearfix {
  clear: both;
}