application.sass

//   Copyright (c) 2010, Diaspora Inc.  This file is
//   licensed under the Affero General Public License version 3 or later.  See
//   the COPYRIGHT file.


$blue: #3F8FBA
$background: rgb(252,252,252)

body
  :padding 2em
  :margin 0
    :top 60px
  :background-color $background
a
  :color #107FC9
  :color $blue
  :text
    :decoration none
  &:hover
    :color $blue
    :text
      :decoration underline

p
  :word-wrap break-word

h1, h2, h3, h4, h5
  :color #444
  :position relative
  :font
    :weight bold

h4
  :margin
    :bottom 5px

ol, ul, li
  :list-style none

form
  :position relative
  input,
  textarea,
  label
    :font
      :size auto

.hidden
  :display none

.avatar
  :width 50px
  :height 50px

#flash_notice,
#flash_error,
#flash_alert
  :z-index 100
  :position fixed
  :color #fff

  :top -100px
  :left 0

  :width 100%

  :padding 1em

  :-moz-box-shadow 0 1px 2px #333
  :-webkit-box-shadow 0 1px 2px #333
  :box-shadow 0 1px 2px #333

  :font
    :weight bold

#flash_notice
  :background
    :color rgb(126,240,77)
    :color rgba(126,240,77,0.98)
  :text
    :shadow 0 1px #6C6

#flash_error,
#flash_alert
  :background
    :color rgb(208,49,43)
    :color rgba(208,49,43,0.98)
  :border
    :bottom solid 1px #C66
  :text
    :shadow 0 1px #C66

.login_error
  :color rgb(208,49,43)
  :text-shadow 1px 1px 20px rgb(208,49,43)

.fieldWithErrors
  :display inline

.error_messages
  :width 400px
  :border 2px solid #CF0000
  :padding 0
  :padding-bottom 12px
  :margin-bottom 20px
  :background-color #f0f0f0
  :font
    :size 12px
  h2
    :text-align left
    :padding 5px 5px 5px 15px
    :margin 0
    :font
      :weight bold
      :size 12px
    :background-color #c00
  p
    :margin 8px 10px
  ul
    :margin 0

header
  :z-index 50
  :position relative

  :background
    :color #111
    :color rgba(15,15,15,0.90)

  :background -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.85)), to(rgba(20,20,20,1)))
  :background -moz-linear-gradient(top, rgba(30,30,30,0.85), rgba(20,20,20,0.98))

  :-webkit-box-shadow 0 1px 3px #111
  :-moz-box-shadow 0 1px 2px #111
  :box-shadow 0 1px 3px #222


  :padding 0
    :top 2px
  :color #CCC

  :position fixed
  :width 100%
  :top 0
  :left 0

  a
    :color #CCC

    &:hover
      :background none
      :color #eee

  &.landing
    .right
      :top 10px
    :height 40px

  ul#user_menu
    :overflow hidden
    :white-space nowrap
    :text-overflow ellipsis
    :text-shadow 0 1px 0 #000

    :width auto

    :cursor pointer

    :z-index 10
    :padding 5px 0
      :left 30px
      :right 5px
    :margin 0
      :top -2px
      :right -5px

    :background
      :color #000

    :-webkit-border-radius 5px
    :-moz-border-radius 5px
    :border-radius 5px

    :position absolute
    :display inline

    :top 5px
    :right 0

    a
      :padding
        :right 15px
      :color #CCC
      &:hover
        :text
          :decoration none
    .right
      :right 5px

    &:hover
      :background
        :color #222

    li
      :display none

      a
        :display block
        :padding 4px
        :height 100%
      &:hover
        :background
          :color $blue
        :color #fff

    &.active
      :margin
        :top -3px
        :right -6px
      :background
        :color #000
      :border 1px solid #999

      :box-shadow 0 1px 2px #333
      :-webkit-box-shadow 0 1px 2px #333
      :-moz-box-shadow 0 1px 2px #333

      li
        :display block

    .avatar
      :height 20px
      :width 20px
      :position absolute
      :left 2px
      :top 2px
      :display block

.unread
  :background-color #eee

.diaspora_header_logo
  :position relative
  :top 4px
  :margin
    :right 1em

.stream
  .stream_element
    :font
      :family 'arial', 'helvetica', sans-serif
    :padding 10px 14px
      :right 75px
    :min-height 50px
    :border
      :bottom 1px solid #ddd
      :top 1px solid #fff

    :font
      :size 13px
    :line
      :height 19px


    &:hover
      :border
        :bottom 1px solid #ddd
      .right
        :display inline

    .youtube-player, .vimeo-player
      :border none
      :height 370px
      :width 500px

.from
  :text
    :shadow 0 1px #fff
  a
    :font
      :weight bold

.arrow
  :color #ccc
  :font
    :weight lighter

.show_photo_attachments
  :border
    :bottom 1px solid #eee
  :padding
    :top 6px
    :bottom 16px
  :margin
    :bottom 2em
  img
    :margin
      :right 1px
      :bottom -1px

#author_info
  :position relative

  img
    :position relative
    :top 0px
    :display inline-block
    :height 30px
    :width 30px

  .from
    :display inline-block

  &.profile
    .from
      :padding 0

  h3,
  h4,
  h5
    :display inline-block

  &.show
    a
      :margin
        :right 1em
      :font
        :weight normal
    h4,
    h5
      :margin 0
      :padding 0

.stream_element
  :position relative
  :word-wrap break-word
  :color #777

  .from
    h5
      :display inline

  .content
    :margin
      :top 0
    :padding
      :left 60px

    :color #444
    :font
      :weight normal

    p
      :margin
        :bottom 6px
      :padding
        :right 1em
      :font
        :family 'arial', 'helvetica', 'sans-serif'

    .photo_attachments
      :margin
        :top 7px

      img
        :margin
          :right 0.5em

    .stream_photo
      :float left
      :margin
        :top 6px

    .photo_description
      :margin
        :top 6px
      :padding
        :left 220px
      :min-height 185px
      :color #888
      :font
        :style italic

    .small_text
      :font
        :size smaller

    .info
      :margin
        :top 2px
      :color #999
      :font-size smaller

    .comments
      .info
        :margin
          :top -1px


  .delete
    :opacity 0.6
    :padding 5px

    &:hover
      :opacity 1

.time,
.timeago
  a
    :color #bbb
  :margin
    :right 1px
  :text
    :decoration none
  :border none

.right .reshare_pane .reshare_button a.inactive
  :color #ccc
  &:hover
    :text
      :decoration none
  :cursor default

.right .reshare_pane .reshare_button
  :padding 2px
  &.active
    :background
      :color #333

    :-webkit-border-radius 5px 5px 0 0
    :-moz-border-radius 5px 5px 0 0
    :border-radius 5px 5px 0 0

    a
      :color #fff
      :text-shadow none

.right .reshare_pane
  :margin
    :left 5px
    :right 5px
  :display inline
  :position relative


  ul.reshare_box
    :width 150px
    :display none
    :z-index 10
    :position absolute
    :margin
      :top 0
    :padding 0

    :background
      :color #fafafa

    :border 5px solid #333

    :text-shadow 0 2px #fff
    :color #000

    > li
      :font
        :weight bold
      :color #ccc
      :border
        :top 1px solid #fff
        :bottom 1px solid #ccc

      &:first-child
        :border
          :top none
      &:last-child
        :border
          :bottom none
      a
        :display block
        :height 100%
        :padding 2px 5px
        :cursor default

        &:hover
          :background
            :color #eee
          :text
            :decoration none
        &:active
          :background
            :color #ccc


#user_name
  :margin
    :bottom 20px

  img
    :margin
      :right 10px
    :display inline-block
    :float left
    :height 40px

  h1
    :margin
      :bottom 7px
    :line-height 18px
    a
      :color #000

  span
    :size small
    :font
      :weight normal
    :color #999
  #latest_message_time
    :font-style italic
  ul
    :display inline
    :margin 0
    :padding 0

    > li
      :display inline
      :margin
        :right 1em

.stream.show
  &:hover
    > li
      :background none
      :border none


.stream ul.comments
  .avatar
    :width 30px
    :height 30px

.submit_button
  :text
    :align right

ul.comments,
ul.show_comments
  :margin 0
    :top 0.5em
  :padding 0
  :background
    :color #F0F4F5

  :font
    :size 12px
  :line
    :height 18px

  textarea
    :width 100%
    :height 1.4em

  li
    :list
      :style none
    :padding 0.4em
    :border
      :bottom 2px solid $background

    .from
      :font
        :size 1em
      :margin
        :bottom 0px

    .youtube-player, .vimeo-player
      :border none
      :height 250px
      :width 400px

    .content
      :color #666
      :margin
        :top 0px
        :bottom -2px
      :padding
        :left 36px
        :right 10px
      .from
        a
          :color #444

      div.time
        :color #bbb

    form
      :margin
        :top -5px
        :bottom -4px
      :font
        :size 1em

      .submit_button
        :display none
        input
          :margin
            :right 0

      textarea
        :font
          :size 1em
        :margin
          :bottom -3px
        :width 388px
        :min-height 23px

      p
        :position relative
        :left 35px

    .avatar
      :position absolute
      :display inline

    form.open
      .submit_button
        :display block
        :margin
          :bottom 2px
          :right 2px
      textarea
        :min-height 2.4em


.stream.show
  ul.comments
    li
      :padding
        :right 135px

      textarea
        :margin
          :bottom 2px

.profile_photo
  img
    :height 300px
    :width 300px

    :-webkit-box-shadow 0 2px 2px #333
    :-moz-box-shadow 0 2px 2px #333
    :box-shadow 0 2px 2px #333

#profile
  h3
    :margin
      :bottom 0
  ul
    :margin 0
    :padding 0

  ul#profile_information
    :margin 1em 0
    > li
      :margin
        :bottom 2em

a.paginate, #infscr-loading
  :border
    :width 1px
    :style solid
    :color $blue
  :display block
  :margin
    :top 10px
  :padding 5px
  :text-align center
  :width 100%
  :cursor pointer

  &:hover
    :border 1px solid #1C6D99

#main_stream .pagination
  :display none

.stream_element
  .right
    :position absolute
    :right 12px

    &.controls
      :background
        :color $background
      :font
        :size 12px
      :color #999
      a
        :color #999
        :font
          :weight normal
  &:hover
    .controls
      :display inline

.stream_element:hover
  .right
    :display inline

.request_buttons
  :position absolute
  :right 0
  :display inline
  :margin 0
  :padding 0

  > li
    :display inline
    &:first-child
      :margin-right 1em

#photo_container
  :text
    :align center

#show_photo
  :z-index 11
  :position relative
  :display inline-block
  :max-width 100%

  img
    :max-width 100%

  #photo_spinner
    :z-index 1
    :position absolute
    :height 100px
    :width 100px

  #caption
    :min-height 20px
    :padding 0 10px
    :font
      :size 16px
    :font
      :family 'MARKER FELT', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif
    :color #333

#debug_info
  :margin-top 50px
  :color #ccc

  h5
    :color #ccc

input:not([type='submit']),
textarea
  :font
    :family 'Arial', 'Helvetica', sans-serif
    :size 14px
  :padding 0.3em
  :display block
  :width 66%
  :border 1px solid #ccc
  :height auto

  :-webkit-border-radius 3px
  :-moz-border-radius 3px
  :border-radius 3px

input[type='checkbox']
  :width auto

input[type='hidden']
  :display none

.submit_block
  :text
    :align right

form p
  :position relative
  :padding 0
  :margin 0

form p.checkbox_select
  :width 75%
  label
    :left 20px
    :top 3px
  img
    :position relative
    :top 6px

label
  :font
    :weight normal
  :color #999
  :position absolute
  :top 3px
  :left 0.48em
  :text
    :shadow 0 1px 1px #eee

#file-upload
  input
    :height 100%
    :width 100%
    :cursor pointer

#publisher
  :z-index 0
  :color #999
  :position relative
  :margin
    :bottom 10px
    :top 0
  :padding 12px
    :top 1px
  :top 0

  :border
    :bottom 2px #777 solid

  &.closed
    .options_and_submit
      :display none !important
    #file-upload
      :display none
    form
      textarea
        :height 18px !important

  form
    :position relative
    :top 0

    ul
      :padding 0
      >li
        :display inline
        :margin-right 2px
        img
          :-webkit-border-radius 5px
          :-moz-border-radius 5px
          :border-radius 5px

  input[type='text'],
  textarea
    :width 435px
    :margin 0

  textarea
    :border 1px solid $blue
    :height 42px

  label
    :font
      :size 14px

  .options_and_submit
    :min-height 21px
    :position relative
    :padding
      :top 6px
    :margin
      :bottom -2px
    input[type='submit']
      :width 75px

    input
      :display inline

    .right
      :top 2px

    .public_toggle
      :font
        :size smaller
        :style italic
      :display inline

    #fileInfo
      :display inline
      :position relative
      :top -2px

  .content_creation
    :margin
      :top 1em

  #click_to_share
    :position relative
    :padding 1em
      :top 0
    :margin
      :bottom -16px

    span
      :margin
        :left 12px
      :font
        :weight bold
      :color #444

    img
      :display inline
      :position absolute
      :top 0
      :left 0px

  #file-upload
    :z-index 10
    :float right
    :height 42px
    :width 103px
    :margin 0

    :-webkit-border-radius 3px
    :-moz-border-radius 3px
    :border-radius 3px

    :border 2px solid #ccc
    :background
      :color #fafafa

    :padding 0.3em
    :cursor pointer

    :font
      :weight bold
      :size smaller

    :text
      :align center
      :shadow 0 1px 0 #eee

    img
      :display inline-block
      :margin 0
      :padding 0
      :margin
        :bottom -3px

      :opacity 0.4

    &:hover
      :background
        :color #eee
      :cursor pointer

      :color #666
      img
        :opacity 0.6

    &:active
      :text-shadow 0 1px 0 #fafafa
      :color #ccc
      img
        :opacity 0.1

    &.loading
      :opacity 0.5

#publisher_textarea_wrapper
  :position relative
  textarea
    :z-index 2

    &.with_attachments
      :padding
        :bottom 70px

  #photodropzone
    :z-index 3
    :position absolute
    :bottom 0
    :width 435px
    :left 5px
    li
      :margin-right 4px
      img
        :height 50px
        :width 50px
      .circle
        :display none
        :z-index 1
        :position absolute
        :right -7px
        :top -47px
        :background
          :color #333

        :width 20px
        :max-width 20px
        :height 20px
        :max-height 20px

        :border 1px solid #fff

        :-webkit-border-radius 10px