application.css.sass

@import 'ui.css.sass'
@import '_mixins.css.scss'
@import '_flash_messages.scss'
@import 'new_styles/_spinner'

/* ====== media ====== */
.media
  :margin 10px

.media, .bd
  :overflow hidden
  :_overflow visible
  :zoom 1

.media .img
  :float left
  :margin-right 10px

.media .img img
  :display block

.media .imgEt
  :float right
  :margin-left 10px
/* ====== ----- ====== */

body
  :padding 2em
  :margin 0
    :top 33px
  :background-color $background

  :font
    :family "Helvetica Neue",Helvetica,Arial,sans-serif
    :size 13px

a
  :color $blue
  :text
    :decoration none
  &:hover
    :color $blue
    :text
      :decoration underline

p
  :word-wrap break-word

h1, h2, h3, h4
  :margin
    :bottom 5px

  small
    :font-size small
    :color #999

ul > li
  :list-style none

.content ul li
  :list-style disc

.rtl
  :direction rtl
  :text-align right

.hidden
  :display none

.avatar
  :-webkit-box-shadow rgba(0,0,0,0.12) 0px 0px 5px inset
  :-moz-box-shadow rgba(0,0,0,0.12) 0px 0px 5px inset

  :background
    :color #eee

  :width 50px
  :height 50px

  :overflow hidden

#content
  :background
    :color #fff
  :border 1px solid #ccc
  :height 100%

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

.login_notice
  :color rgb(10,150,10)
  :text-shadow 1px 1px 20px rgb(126,240,77)

.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
  @include box-shadow(0,1px,3px,rgba(0,0,0,0.9))

  :background
    :color rgb(40,35,35)
    :image image-url('header-bg.png')

  :z-index 1001
  :padding 6px 0
  :color #CCC
  :height 26px

  :position fixed

  :width 100%
  :top 0
  :left 0

  :border
    :bottom 1px solid #000

  a
    :color #CCC
    :color rgb(147,147,147)

    &:hover
      :background none
      :color #fafafa

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

  ul#user_menu
    :overflow hidden
    :white-space nowrap
    :text-overflow ellipsis
    :text-shadow 0 1px 0 #000
    :color rgb(147,147,147)

    :min-width 100px

    :cursor pointer

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

    :border
      :left 1px solid #333
      :right 1px solid #333

    :display inline

    :top -4px
    :float right

    li
      a
        :padding 4px
        :height 100%
        :color #939393
        &:hover
          :background
            :color $blue
          :color #fff
          :text
            :decoration none

      &:first-child
        :padding 5px 0
        a
          :padding
            :right 15px
          &:hover
            :background
              :color transparent
            :text
              :decoration none
          &:focus
            :outline none
        .right
          :right 5px

    &.active
      @include dropdown-shadow

      :margin
        :top -3px
        :right -5px
      :background
        :color rgb(34,30,30)
      :border 1px solid #999

    .avatar
      :height 22px
      :width 22px
      :position absolute
      :left 7px
      :top 9px
      :display block

  .header-nav
    :font-weight bold
    :float left
    :height 100%
    :margin-right 5px
    :margin-top 3px

    a
      :padding 0 10px
      :width 100%
      &:hover
        :text-decoration none

    > span
      :height 100%
      :display inline-block
      :margin-left -4px
      :border
        :left 1px solid #333
        :right 1px solid #333

      &:last-child
        :margin-left -5px


header.ie-user-menu-active
  :height 150px

//////////////////////////////////
ul.dropdown
  :padding 0

  li
    :display none
    a
      :display block

    &:first-child
      :display block
      a
        :height auto
        :display inline

  &.active
    :z-index 30
    li
      :display block

//////////////////////////////////
//hacks for tagging plugin...
ul.as-selections
  :width 100% !important
//////////////////////////////////

.unread
  :background-color #E6E6E6
  :color #333 !important
  time
    :color #333 !important

.diaspora_header_logo
  :float left
  :margin-top -6px

.stream
  audio
    :display block
    :margin 5px 0

  .stream_element
    :border
      :bottom 1px solid #ddd

    p
      &:last-child
        :padding-bottom 0
        :margin-bottom 0

    &:first-child
      :border
        :top none

    ul
      li
        :list-style disc

    .youtube-player, .vimeo-player
      :border none
      :height 304px
      :width 410px

#author_info
  :position relative

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

  .from
    :display inline-block

  &.profile
    .from
      :padding 0

  h2,
  h3,
  h4,
  h5
    :display inline-block
    :margin
      :bottom 10px
      :right 10px
  h2
    :margin
      :bottom 0

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

  .right
    :top 10px

  .description
    :margin
      :bottom 10px

.stream_element
  a.author
    :font-weight bold

  .photo_attachments
    :margin
      :top 7px

  img
    :max-width 100%

  .bd
    > img
      :height 30px
      :width 30px
      :float left
      :margin
        :right 10px

  .stream_photo
    :float left
    :margin
      :top 6px

  &:hover
    .controls:first-child
      @include opacity(0.5)

.info
  :font-size smaller

  .control_icon
    @include opacity(0.3)
    :padding 5px

    &:hover
      @include opacity(1)

.controls
  @include transition(opacity)
  @include opacity(0)
  :z-index 6
  :float right

  &:hover
    @include opacity(1)

.controls
  a:hover
    :text-decoration none

.status_message_show
  .comment_box
    :width 653px
    :margin
      :bottom 5px

.grey,
.grey *
  :color #999

.details,
.details *
  :font
    :weight normal

.post_scope
  :cursor default

.time,
.timeago,
.via
  :color #aaa
  a
    :color #999
  :text
    :decoration none
  :border none

#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

.submit_button
  input
    :float right

.stream_element .reshare,
.comment
  .avatar
    :width 30px
    :height 30px

.likes,
.stream_element div.reshare
  :font
    :size 12px

.comment.no-border
  :border none

.comment
  &.media
    :margin
      :left 0
      :right 0

  :border
    :bottom 1px dotted #aaa

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

  .ltr
    ol, ul
      :padding-left 2em
      li
        :padding 0px
        :border none
        :list-style inherit

  .right
    :right 4px


.stream_element .post-content .reshare
  :border-left 2px solid #ddd

form.new_comment
  input
    :display none

  textarea
    :height 21px
    :font-size 12px
    :width 355px

  &.open
    input
      :display block


.profile_photo
  img
    :height auto
    :width 200px

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

  ul#profile_information
    :margin 1em 0
    > li
      :margin
        :bottom 2em
        :right 2em
      h4
        :font-weight bold

#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
    :color #333

input:not([type='submit']):not([type='reset']):not([type='hidden']):not(.as-input),
textarea
  @include border-radius(2px)
  :background-color #fff
  :color #000
  :margin-top 1px
  :font
    :family "Arial", "Helvetica", sans-serif
    :size 14px

  :padding 0.3em

  :display block
  :border 1px solid #ccc
  :height auto

input[type='checkbox']
  :width auto !important

form p
  :position relative
  :padding 0
  :margin 0

form#update_profile_form p.checkbox_select
  label
    :top 0   

form p.checkbox_select
  :width 75%
  label
    :left 25px
    :top 3px
    :position absolute
    :font-size 1em
  img
    :position relative
    :top 6px

@mixin placeholder_styles
  :color #999
  :text-shadow 0 1px 1px #eee
  :font-weight normal

.placeholder
  @include placeholder_styles

/* those can't be combined, see: http://stackoverflow.com/questions/2610497 */
*::-webkit-input-placeholder
  @include placeholder_styles

*:-moz-placeholder
  @include placeholder_styles

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

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

  :border
    :bottom 1px #eee solid

  form
    textarea
      :resize none
      :width 455px
      :height 50px
      :margin 0

  &.mention_popup
    :padding 1px 12px
    :margin
      :bottom 0
    :border
      :bottom none

  &.closed
    .options_and_submit
      :display none !important

    .counter
      :display none

  &:not(.closed)
    textarea
      :margin
        :bottom 30px

  .options_and_submit
    :min-height 21px
    :clear both
    :position relative
    :padding
      :top 6px
    :margin
      :bottom -2px

    input
      :display inline

    .public_toggle
      :text
        :align right
      .dropdown
        :text
          :align left

    #publisher_service_icons
      :position relative
      :top 3px
      :margin
        :right 10px

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

  #status_message_fake_text
    :min-height 20px


  .content_creation
    :margin
      :top 1em

  #file-upload
    :bottom 1px !important
    :display inline-block
    :margin 0
    :padding .3em .3em 3px
    :position absolute !important
    :right 6px
    :cursor pointer


    input[type='file']
      :cursor pointer
      :right initial !important
      :height 100%
      :width 100%

    img
      @include opacity(0.4)

      :vertical-align bottom

    &:hover
      :color #666
      :cursor pointer

      img
        @include opacity(0.8)

    &:active
      :color #444
      :text-shadow 0 1px 0 #fafafa

      img
        @include opacity(1)

    &.loading
      @include opacity(0.5)

#publisher_textarea_wrapper
  #hide_publisher
    @include opacity(0.3)
    :z-index 5
    :padding 3px
    :position absolute
    :right 6px
    :top 0

    &:hover
      @include opacity(1)

  @include border-radius(2px)

  :border 1px solid #ccc
  :background #fff

  &.active
    :border 1px solid #999

  :position relative
  :padding
    :right 10px

  textarea
    :z-index 2
    :border none

    &:focus
      :outline 0
      :background transparent

  &.with_attachments
    :padding-bottom 38px

  #photodropzone
    :z-index 3
    :position absolute
    :bottom 0
    :width 435px
    :left 5px
    :padding 0

    li
      :display inline-block
      :margin-right 4px
      img
        :width 50px
        :max-height 55px
      .circle
        @include border-radius(20px)

        :display none
        :z-index 1
        :position absolute
        :right -7px
        :top -5px
        :background
          :color #333

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

        :border 1px solid #fff

      .x
        :display none
        :z-index 2
        :position absolute
        :top -3px
        :right -1px
        :font
          :size small
          :weight bold

      &:hover
        :cursor default
        .circle
          :display block
        .x
          :display block

  .counter
    :position absolute
    :font-size 13px
    :padding-top 2px
  .warning
    :color orange
  .exceeded
    :color red
.field_with_submit
  input[type='text']
    :width 82%
    :display inline

#publisher.closed
  #publisher_textarea_wrapper
    #hide_publisher
      :display none

.dim
  @include opacity(0.3)

img.thumb_small
  :max-height 50px
  :max-width 50px
img.thumb_medium
  :max-height 100px
  :max-width 100px
img.thumb_large
  :max-height 300px
  :max-width 300px
img.scaled_full
  :max-height 700px
  :max-width 700px

#thumbnails
  a
    :display inline-block
    :height 140px
    :min-height 100px
    :margin
      :bottom 5px
      :right 2px

    img
      :height 140px

#global_search
  :float right

  :margin
    :right 10px

  :position relative

  form
    :position absolute
    :right 0
    input
      @include box-shadow(0,1px,1px,#444)
      @include border-radius(15px)
      @include transition(width)

      :width 100px
      :background-color #444

      :border 1px solid #222

      :font-size 13px
      :padding 4px

      &:hover
        :background-color #555

      &.active
        :background-color #fafafa
        :background-color rgba(160,160,160,0.6)

      &:focus
        :outline none
        :background-color white
        :width 200px

      &::-webkit-input-placeholder
        :text-shadow none
      &:-moz-placeholder
        :text-shadow none

ul#settings_nav
  :display inline
  :padding 0
  :font
    :size large
  :position absolute
  :left 198px
  :top 5px

  > li
    :display inline
    :margin
      :right 1em
    :font
      :weight 700

    a
      :padding 2px
      :font
        :weight normal

.settings_pane
  :display none

#account_data
  a
    :line-height 30px

.contact_pictures.horizontal
  img
    :margin-right -5px

#thumbnails
  :line-height 14px

#aspect_list
  :margin 0
  :padding 0

.dull
  :color #aaa
  :font
    :style italic

  a
    :color #69AEDD

h1,h2,h3,h4
  .description
    :font
      :size 70%
      :weight 100
    :color #aaa
    :margin
      :top 0.5em

h2,h3,h4