mailcatcher/public/stylesheets/application.sass

@import compass
@import compass/reset

html, body
  width: 100%
  height: 100%

body
  +establish-baseline(12px)
  +display-box
  +box-orient(vertical)
  background: #eee
  color: #000
  font-size: 12px
  font-family: Helvetica, sans-serif

.button
  padding: .5em 1em
  border: 1px solid #ccc
  +border-radius(2px)
  +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
  color: #666
  +text-shadow(1px 1px 0 #fff)
  text-decoration: none
  &:hover, &:focus
    border-color: #999
    border-bottom-color: #666
    +background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
    color: #333
    text-decoration: none
  &:active, &.active
    border-color: #666
    border-bottom-color: #999
    +background(linear-gradient(color-stops(#ddd, #eee)), #eee)
    color: #333
    text-decoration: none
    +text-shadow(-1px -1px 0 #eee)

body > header
  +clearfix
  border-bottom: 1px solid #ccc
  h1
    float: left
    margin-left: 6px
    padding: 6px
    padding-left: 30px
    background: url(/images/logo.png) left no-repeat
    font-size: 18px
    font-weight: bold
    a
      color: black
      text-decoration: none
      +text-shadow(0 1px 0 white)
      +transition(0.1s ease)
      &:hover
        color: #4183C4
  nav
    &.project
      float: left
    &.app
      float: right
    border-left: 1px solid #ccc
    li
      display: inline
      a
        +inline-block
        float: left
        padding: 9px
        border-left: 1px solid #fff
        border-right: 1px solid #ccc
        text-decoration: none
        +text-shadow(0 1px 0 white)
        +background(linear-gradient(color-stops(#f4f4f4, #ececec)), #ececec)
        color: #666
        +text-shadow(1px 1px 0 #fff)
        text-decoration: none
        &:hover, &:focus
          +background(linear-gradient(color-stops(#eee, #ddd)), #ddd)
          color: #333
          text-decoration: none
        &:active, &.active
          +background(linear-gradient(color-stops(#ddd, #eee)), #eee)
          color: #333
          text-decoration: none
          +text-shadow(-1px -1px 0 #eee)

#messages
  width: 100%
  height: 10em
  // Two rows with padding:
  min-height: (2 * (1em + .5em))
  overflow: auto
  background: #fff
  border-top: 1px solid #fff
  table
    +clearfix
    width: 100%
    thead tr
      background: #eee
      color: #333
      th
        padding: .25em
        font-weight: bold
        color: #666
        +text-shadow(0 1px 0 white)
    tbody tr
      cursor: pointer
      +transition(0.1s ease)
      color: #333
      &:hover
        color: #000
      &:nth-child(even)
        background: #f0f0f0
      &.selected
        background: Highlight
        color: HighlightText
      td
        padding: .25em
        &.blank
          color: #666
          font-style: italic
#resizer
  padding-bottom: 5px
  cursor: ns-resize
  .ruler
    border-top: 1px solid #ccc
    border-bottom: 1px solid #fff

#message
  +display-box
  +box-orient(vertical)
  +box-flex(1)
  > header
    +clearfix
    .metadata
      +clearfix
      padding: .5em
      // This is already padded by resizer
      padding-top: 0
      dt, dd
        padding: .25em
      dt
        float: left
        clear: left
        width: 8em
        margin-right: .5em
        text-align: right
        font-weight: bold
        color: #666
        +text-shadow(0 1px 0 white)
      dd.subject
        font-weight: bold
      .attachments
        display: none
        ul
          display: inline
          li
            +inline-block
            margin-right: .5em
    .views
      ul
        padding: 0 .5em
        border-bottom: 1px solid #ccc
      .tab
        +inline-block
        a
          +inline-block
          padding: .5em
          border: 1px solid #ccc
          background: #ddd
          color: #333
          border-width: 1px 1px 0 1px
          cursor: pointer
          +text-shadow(0 1px 0 #eeeeee)
          text-decoration: none
        &:not(.selected):hover a
          background-color: #eee
        &.selected a
          background: #fff
          color: #000
          height: 13px
          +box-shadow(1px 1px 0 #ccc)
          margin-bottom: -2px
          cursor: default
      .action
        +inline-block
        float: right
        margin: 0 .25em
  .body
    +display-box
    +box-flex(1)
    width: 100%
    background: #fff