common.sass

// Fat Free CRM
// Copyright (C) 2008-2010 by Michael Dvorkin
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU Affero General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU Affero General Public License for more details.
//
// You should have received a copy of the GNU Affero General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.
//------------------------------------------------------------------------------

!color_title    = black
!color_subtitle = "darkslateblue"
!sidebar_width  = 210px

// Common page elements.
//------------------------------------------------------------------------------
.title
  :border-bottom 1px gray solid
  :color = !color_title
  :font
    :size 17px
    :weight bold
  :padding-bottom 2px

  img
    :position relative
    :top 2px

.title_tools
  :font-size 12px
  :float right
  :margin 4px 0px 0px 0px

.subtitle
  :border-bottom 1px silver solid
  :color #2f2f2f
  :font
    :size 13px
    :weight bold
  a:link, a:visited
    :color = !color_subtitle
    :text-decoration none
  a:hover
    :background none

.subtitle_tools
  :font-size 11px
  :float right

.radio_box
  :line-height 20px

  input
    :position relative
    :top -2px

.check_box
  :line-height 20px
  
  input
    :position relative
    :top -3px
  
  label
    :font-size 11px

// Main area (page and form).
//------------------------------------------------------------------------------
.tabless
  :margin auto
  :width 480px

.standalone
  :background whitesmoke
  :border 20px #860000 solid
  :margin 75px auto 6px auto
  :padding 20px
  :width 400px
  :-moz-border-radius 6px
  :-moz-box-shadow 5px 5px 15px #bbb, -5px 0px 15px #bbb
  :-webkit-border-radius 6px
  :-webkit-box-shadow 5px 5px 15px #bbb, -5px 0px 15px #bbb

  input[type="text"], input[type="password"]
    :font-size 16px
    :padding 2px
    :width 355px

  input[type="submit"]
    :font-size 14px

.tabbed
  :padding 12px 12px 12px 16px

.main
  :background white
  :padding 8px 15px 15px 15px
  :-moz-border-radius 4px
  :-moz-box-shadow 2px 2px 8px #bbb, -2px 0px 8px #bbb
  :-webkit-border-radius 4px
  :-webkit-box-shadow 2px 2px 8px #bbb, -2px 0px 8px #bbb

.sidebar
  :color #3f3f3f
  :font-size 11px
  :padding 0px 12px 0px 0px
  :width = !sidebar_width

.form
  :background white

  h4
    :font-size 18px
    :height 30px

.tools
  :font-size 10px
  :float right
  :padding 0px 0px 0px 4px

  &#comment_new_tools
    :margin 8px 0px 0px 0px

.label
  :color #3f3f3f
  :font-size 12px
  :margin 8px 0px 0px 0px

.top
  :margin 5px 0px 0px 0px

.req
  :color #330000

.intro
  :color dimgray
  :font-size 12px
  :padding-top 5px

.section
  :background whitesmoke
  :color #3f3f3f
  :margin 0px 0px 2px 0px
  :padding 4px 15px 8px 15px

.remote
  :border 5px lightblue solid
  :background whitesmoke
  :margin 0px
  :padding 0px 10px 0px 10px
  :position relative
  .close
    :background lightblue
    :border
      :top 1px gainsboro solid
      :left 1px gainsboro solid
      :bottom 1px grey solid
      :right 1px grey solid
    :color #330000
    :cursor pointer
    :height 16px
    :margin 3px
    :position absolute
    :right 0px
    :text-align center
    :top 0px
    :width 17px

.buttonbar
  :border-top 1px gray solid
  :margin 8px auto
  :padding-top 8px

.section input, .sidebar input, .inline input,
.section select, .sidebar select, .inline select,
.section textarea, .sidebar textarea, .inline textarea
  :margin 3px 0px 0px 0px
  :vertical-align middle

.cool
  :color darkgreen

.warn
  :color crimson

.urgent
  :color darkred

.black
  :color black

.white
  :color white !important

.grayed
  :color silver !important

.strip
  :background gainsboro
  :color black
  :float left
  :font-size 11px
  :margin 0px 6px 0px 0px
  :padding 1px 4px 1px 3px
  :text-align right
  :width 75px
  :-moz-border-radius
    :topleft 7px
    :bottomleft 7px
  :-webkit-border
    :top-left-radius 7px
    :bottom-left-radius 7px

// Indentation classes:
//   - indent: for use with strip (regular indentation).
//   - indentslim: for use with avatar and no strip (Contacts).
//   - indentwide: for use with strip + checkbox (Tasks).
//   - indentfull: for use with strip + avatar (Admin/Users).
.indent
  :margin-left 88px

.indentslim
  :margin-left 38px

.indentwide
  :margin-left 106px

.indentfull
  :margin-left 126px

.bucket
  :margin 0px 0px 10px 0px

.prefix
  :width 30px
  :font-size 10px

.comment
  :background #f2f2f2
  :border-bottom 1px gainsboro solid
  :margin 2px 0px 0px 0px
  :overflow hidden
  :padding 4px
  :list-style none
  //  :-moz-border-radius
  //    :bottomleft 8px
  //    :bottomright 8px
  //  :-webkit-border-radius
  //    :bottom-left-radius 8px
  //    :bottom-right-radius 8px

  &#comment_new
    :margin 3px 0px 0px 0px

  input[type=text]
    :border 1px #cfcfcf solid
    :color grey
    :font-size 11px
    :margin 3px 0px 0px 0px
    :padding 3px
    :width 500px
  textarea
    :font-size 11px
    :height 110px
    :margin 3px 0px 0px 0px
    :padding 3px
    :width 500px

  .gravatar
    :float left
    :margin 3px 10px 3px 3px

  .body
    :display inline
    :font-size 11px

  tt
    :font-size 10px
    :color #666666

  dt
    :padding 0px
    :margin -10px 0px 0px 36px
    p
      :margin 10px 0px 0px 0px

// Avoid collision with .email CSS class which is used to display Task category strip.
.mail
  :background #f2f2f2
  :border-bottom 1px gainsboro solid
  :margin 2px 0px 0px 0px
  :overflow hidden
  :padding 4px
  :list-style none

  .gravatar
    :float left
    :margin 3px 10px 3px 3px

  .subject
    :color black

  .body
    :display inline
    :font-size 11px

  tt
    :font-size 10px
    :color #666666

  dt
    :padding 0px
    :margin -10px 0px 0px 36px
    p
      :margin 10px 0px 0px 0px

.toggle
  :font-weight normal

#paginate
  :float right
  :font-size 10px
  :margin 4px 0px 0px 0px

#paging
  :float right
  :margin 7px 5px 0px 0px

.confirm
  :background #cdfecd
  :border-left 10px palegreen solid
  :font-size 11px
  :margin 0px 0px 6px 0px
  :padding 6px

// Single-row lists.
//------------------------------------------------------------------------------
.log
  :padding 8px 0px 0px 0px

  h3
    :border-bottom 1px #2f2f2f dotted
    :color #2f2f2f
    :margin 0px 0px 4px 0px
    :padding 2px 0px 2px 86px
    &.overdue
      :color crimson
      :border-bottom 1px crimson dotted
    &.due_asap
      :color darkred
      :border-bottom 1px darkred dotted
    &.due_today
      :color darkgreen
      :border-bottom 1px darkgreen dotted
  li
    :color #3f3f3f
    :font-size 12px
    :list-style none
    :padding 3px 0px 3px 0px

    tt
      :color dimgray
      :font-size 11px

  input[type=checkbox]
    :float left
    :margin 0px 4px 0px 0px

// Two-row lists.
//------------------------------------------------------------------------------
.list
  :padding 8px 0px 0px 0px
  li
    :border-bottom 1px silver dotted
    :clear both
    :color #3f3f3f
    :font-size 12px
    :list-style none
    :padding 6px 0px 6px 0px

    .gravatar
      :float left
      :padding 0px 8px 0px 0px

    tt
      :color dimgray
      :font-size 11px

    dt
      :color #3f3f3f
      :font-size 11px
      :padding 2px 0px 0px 0px

    dt a:link, dt a:visited
      :color #3f3f3f
      :font-weight bold
      :text-decoration none

    dt a:hover
      :background dimgray
      :color white
      :font-weight bold
      :text-decoration none

// Sidebar, filters, and selectors.
//------------------------------------------------------------------------------
.filters, .panel
  :background snow
  :margin 0px 0px 12px 0px
  :padding 6px 8px 6px 8px
  :-moz-border-radius 4px
  :-webkit-border-radius 4px
  :-moz-box-shadow 2px 2px 8px #bbb, -2px 0px 8px #bbb
  :-webkit-box-shadow 2px 2px 8px #bbb, -2px 0px 8px #bbb

.filters
  h4
    :color #330000
    :font-size 12px
    :font-weight bold
  input[type=text]
    :margin-bottom 4px

.panel
  div
    :margin 0px 0px 10px 0px
  h4
    :font-size 13px
    :font-weight bold
  li
    :border-bottom 1px silver dotted
    :font-size 12px
    :list-style none
    :padding 2px 0px 3px 0px
    dt
      :float right
      :font-size 11px
      :font-weight bold
    tt
      :font-size 11px
    &.last
      :border-bottom none

  .caption
    :border-bottom 1px grey solid
    :color #330000
    :font
      :size 12px
      :weight bold
    :margin 4px 0px 2px 0px
    :padding 2px 0px 2px 0px

  &#recently
    :background floralwhite

  &#summary
    :background oldlace

    p
      :margin 4px 0px 4px 0px

.selector
  :color black
  :cursor pointer
  :font-size 10px
  :text-align center

.on
  :background lightgoldenrodyellow
  :border 1px silver inset

.off
  :background lightgrey
  :border 1px silver outset

.left
  :-moz-border-radius
    :bottomleft 9px
    :topleft 9px
  :-webkit-border
    :bottom-left-radius 9px
    :top-left-radius 9px

.right
  :-moz-border-radius
    :bottomright 9px
    :topright 9px
  :-webkit-border
    :bottom-right-radius 9px
    :top-right-radius 9px

// Dropdown menu.
//------------------------------------------------------------------------------
.menu
  :background #f4f5eb
  :border
    :top 1px solid #ddd
    :left 1px solid #ddd
    :right 1px solid #666
    :bottom 1px solid #666
  :left 0px
  :padding 2px 0px
  :position absolute
  :top 0px
  :width 12em
  :-webkit-box-shadow 10px 10px 15px gainsboro
  ul
    :list-style none
    :margin 0px
    :padding 0px
  li
    :list-style-position outside
  a
    :color #555
    :cursor default
    :display block
    :margin 0px 2px
    :outline none
    :padding 4px 15px
    :text-decoration none
  a:hover
    :background mediumblue //#006
    :color #fff


// Star ratings.
//------------------------------------------------------------------------------
// .rating .stars {
//   width: 125px;
//   height: 25px;
//   float: left;
//   background: transparent url('../images/stars.gif') repeat-x right top;
//   margin-right: 5px;
// }
//
// .rating .clearer {
//   clear: left;
// }
//
// .rating .label {
//   line-height: 16px;
//   font-size: 90%;
// }
//
// .rating .stars .star {
//   width: 25px;
//   height: 25px;
//   cursor: pointer;
//   background: transparent url('../images/stars.gif') no-repeat 0 0;
//   float: left;
// }
//
// .rating .stars .star.on {
//   background-position: 0 -25px;
// }
//
// .rating.selected .stars .star.on {
//   background-position: 0 -50px;
// }
//
// .rating .stars .star.on.half {
//   background-position: 0 -25px;
//   width: 12px;
//   margin-right: 12px;
// }
//
// .rating.selected .stars .star.on.half {
//   width: 25px;
//   margin-right: 0px;
//   background-position: 0 -50px;
// }