path: root/app/assets/stylesheets/application.css.sass

@import 'compass'
@import 'colors'
@import 'ui'
@import '_mixins'
@import '_flash_messages'
@import 'new_styles/_spinner'

@import 'sidebar'
@import 'leftnavbar'
@import 'sprites'
@import 'header'
@import 'footer'
@import 'opengraph'
@import 'poll'
@import 'help'
@import 'publisher_blueprint'
@import 'facebox'
@import 'aspects'
@import 'stream-faces'
@import 'popover'
@import 'stream_element_blueprint'
@import 'report'
@import 'new_styles/_forms'
@import 'tag'
@import 'photo'

@import 'perfect-scrollbar'

/* ====== 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-white

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

a
  :color $blue
  :text
    :decoration none
  &:hover
    :color $blue
    :text
      :decoration underline
  &.disabled
    :color $link-disabled-grey
    :cursor default
  &.disabled.button:hover
    :color $link-disabled-grey
    :cursor default
    :background #f7f7f7

p
  :word-wrap break-word

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

  small
    :font-size small
    :color $text-grey

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 $background-grey

  :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

//////////////////////////////////

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

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

#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

.info
  :font-size smaller

.controls
  :z-index 6
  :float right

  .post_report, .comment_report
    :display inline-block

    .icons-report
      :height 14px
      :width 14px

  .block_user
    :display inline-block

    .icons-ignoreuser
      :height 14px
      :width 14px

  .delete
    :display inline-block

    .icons-deletelabel
      :height 14px
      :width 14px

  a:hover
    :text-decoration none

.grey,
.grey *
  :color $text-grey

.pull-left
  :float left

.pull-right
  :float right

.details,
.details *
  :font
    :weight normal

.time,
.via
  :color #aaa
  a
    :color $text-grey
  :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 $text-grey
  #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

#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
  label
    :left 25px
    :top 3px
    :position absolute
    :font-size 1em
  img
    :position relative
    :top 6px

@mixin placeholder_styles
  :color $text-grey
  :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

.field_with_submit
  input[type='text']
    :width 82%
    :display inline

.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

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

.dull
  :color #aaa
  :text-align center
  :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
  .description
    :font
      :size 80%
      :weight 200

input[type="search"]
  :-webkit-appearance textfield
  :-moz-appearance textfield

#photo_edit_options
  :display none

#photodropzone
  :padding 0px
  :margin 0px

#section_header
  :width 100%
  :border
    :bottom 2px solid #777
  :position relative

  :margin
    :bottom 2em
  :padding
    :bottom 0.4em

  h2
    :display inline

  .right
    :margin
      :top 10px

  h4
    :display inline
    :margin
      :left 1em

.photo_options
  :color $text-grey
  :text
    :align center

.inline
  :display inline

.floating
  @include box-shadow(0,1px,3px,#333)

  :position relative
  :padding 12px
  :margin
    :bottom 2em
  :background
    :color rgb(255,255,255)

  :border
    :bottom 1px solid #ccc
    :top 1px solid #fff

  .submit_block
    :position absolute
    :bottom 13px
    :right 12px

  form
    :display relative

#user_photo_uploader
  .avatar
    @include border-radius(5px)

    :height 100px
    :width 100px

h3 span.current_gs_step
  :color #22C910

ul#request_result
  :padding 0
  :margin 0
  li
    :margin
      :bottom 25px
    input.add
      :color green
  .stream_element
    .content
      :display inline
      :position relative
      :bottom 2.5em
      :padding 0

#signup_field
  :margin
    :top -200px
  :height 46px
  :padding 0
  :width 400px
  :display inline

  div
    :display inline

  #mce-responses
    :margin
      :top 12px
    :font
      :size 12px
    :display block
    :color $text-grey
    :text-shadow 0 1px 0 #fff

    #mce-error-response
      :color red

    #mce-success-response
      :color green

  input[type='text']
    :top -1px
    :margin 0
      :right -3px
    :width 300px


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

    :position relative
    :display inline
    :padding 12px
    :font
      :size 18px

  #big_action_button, input[type='submit']
    @include linear-gradient(rgb(65,182,250),rgb(0,123,194))

    :height 47px
    :margin 0
    :background
      :color $blue

    :-webkit-border-radius 0 5px 5px 0
    :-moz-border-radius 0 5px 5px 0
    :border-radius 0 5px 5px 0
    :border 1px solid #CCC

    :padding 12px
    :font
      :size 18px
      :weight bold
    :color #eee
    :text-shadow 0 1px 0 #333

    :text
      :align center

    &:hover
      @include linear-gradient(rgb(0,136,209),rgb(113,204,255))

#diaspora_description
  :background
    :image image-url('branding/ball.png')
    :repeat no-repeat
    :position top center

  :padding
    :top 250px
  :margin
    :top -200px


  :font
    :size 3.3em
    :weight bold
  :text-shadow 0 1px 3px #999

  p
    @include box-shadow(0,1px,3px,#ccc)
    :padding 12px
    :background
      :color #fff

#login_field
  :text
    :align left
  :font
    :style italic
  :margin
    :top 14px
    :left 540px
  :color $text-grey


ul#press_logos
  :margin 0
    :top 100px
  :padding 0
  > li
    :display inline
    :margin
      :right 30px

    img
      :height 40px

    &:last-child
      :margin
        :right 0

#landing_content
  :margin
    :top 100px
  :text
    :align center

#why
  :margin
    :bottom 48px

  h2
    :text-shadow 0 1px #fff
    :border
      :bottom 3px solid #eee

#signup
  :margin
    :bottom 48px

#already_invited_pane
  h4
    :color $text-dark-grey
  :color $text-dark-grey

#search_title
  :font
    :weight 200

  .term
    :font
      :weight bold

.aspects
  :position relative
  :margin
    :top 1em

  .right
    :right 12px

  .contact_list
    :height auto
    :max-height auto
    :width 500px

.aspects .aspect_badge
  :font
    :size 1em

.share_with
  :min-width 430px

  .avatar
    :width 50px
    :height 50px
    :float left

  h4,p
    :padding
      :left 64px

  p
    :color #eee

#aspects_list
  :height auto

.show_comments
  :border
    :top 1px solid $border-grey
  :margin
    :top 5px

.show_comments,
.likes_container
  a
    :color $text-grey

.likes
  .entypo.heart
    :font-size 16px
    :line-height 16px
    :vertical-align top
    :margin-right 5px

  .bd
    :display inline-block

    .expand_likes
      :vertical-align text-bottom

.mark_all_read
  :position relative
  :top 10px

#inner_account_delete
  :width 810px

.icons-monotone_email_letter_round
  :height 128px
  :width 128px

#email_invitation
  input
    :width 100%
  textarea
    :width 100%

.share_with
  .add_aspect
    @include border-radius(5px)

    :margin
      :top 0.5em
    :background
      :color #ddd
    p
      :padding
        :left 1em
      input[type='text']
        :width 95%

      &.checkbox_select
        label
          :padding
            :left 15px
          :top 0
        :height 2em
    .right
      :z-index 5
      :top 34px
      :right 1em

  .done
    :padding 1em
      :bottom 2em
    .right
      :right 1em

.invite_friends
  :padding 1em
  :background
    :color $background-grey
  :border 1px solid #ccc

#remember_me
  input[type='checkbox']
    :display inline
    :height auto !important
    :top 2px !important
  label
    :font-size inherit !important
    :position static

.public_icon, .service_icon
  :cursor pointer

#contact_visibility_padlock:hover
  @include opacity(0.7)

.side_stream
  .stream_element
    :padding 10px 0
  .avatar
    :float left

.diaspora_handle
  :font
    :size 12px
    :weight normal
  :color #555

.add_tags
  :font
    :weight normal
    :size 11px

.hover_edit
  :display none
  :font
    :weight normal
    :size 11px
  :margin
    :left 5px

.description:hover
  .hover_edit
    :display inline

.date
  :background
    :color #e6e6e6
  :border-radius 8px
  :padding 5px
  :color $text-grey

  :text-align center
  .day
    :font-size 50px
    :font-weight 200
    :margin-bottom -15px
    :margin-top -10px

  .month
    :font-size 14px

.subtle
  :color $text-grey
  :font
    :style italic

.button.sign_up
  @include linear-gradient(#D9FFA9,#B9E68A)
  :text-shadow none
  :color #333

  &:hover
    @include linear-gradient(darken(#D9FFA9,10%),darken(#B9E68A,10%))

  &:active
    @include linear-gradient(darken(#D9FFA9,20%),darken(#B9E68A,20%))

#client-application-image
  :max-width 100%

#service_stream
  :margin 0
  :padding 0

#authorize
  :text-align center

#application-description
  :display inline-block
  :width 300px
  :padding-bottom 20px

ul#requested-scopes
  :vertical-align middle
  li
    :display inline-block
    :padding 5px

    img
      :height 30px
      :width 30px

    .scope-description
      :display none

.item_count
  :min-width 16px
  :line-height 16px
  :text-align center
  :float right
  @include border-radius(4px)
  :margin-top 1px
  :color $text-grey
  :background
    :color $background-grey
  :display inline-block
  :font
    :size 11px
    :weight 700

ul.left_nav
  :margin 0
    :bottom 15px
  :padding 0

  &.sub
    :padding-left 6px

  a.community_aspect_selector
    :width 152px
    :vertical-align middle
    :display inline-block
    :line-height 25px
    :text
      :decoration none
  a
    :font-weight bold
    :color $link-grey
    :text
      :decoration none

  li
    :position relative
    :width 100%

  li.active
    > a.home_selector:not(.sub_selected)
      :font
        :weight 700

    > a:not(.sub_selected)
      :color #333
      .item_count
        :color $text-dark-grey

  a.aspect_selector,
  a.home_selector,
  a.tag_selector,
  a.element_selector
    &:active
      :cursor -webkit-grabbing
      :cursor -moz-grabbing
      :cursor grabbing

  a.home_selector,
  a.tag_selector,
  a.element_selector,
  .root_element
    :display block
    :width 100%
    :padding 3px 7px

  a.home_selector,
  li.aspect_element,
  a.element_selector
    &:hover
      @include border-radius(2px)
      :background
        :color lighten($blue,45%)
      :text
        :decoration none

  .unfollow_icon
    :margin-right 10px
    :margin-top 4px
    @include transition(opacity)
    @include opacity(0.3)
    :position absolute
    :display none
    :padding 0 5px
    &:hover
      @include opacity(1)

  .edit
    :margin-right 10px
    :margin-top 4px
    :width 12px
    :height 12px
    :margin-top 6px
    @include transition(opacity)
    @include opacity(0.3)
    :float right
    :display none
    &:hover
      @include opacity(1)

  ul.sub_nav
    :padding
      :left 25px
    :margin 0
    li
      :width 204px

.section
  .left_nav
    a.aspect_selector,
    a.home_selector
      :width 150px
    ul.sub_nav
      :width 140px
      &:hover
        :width auto

      a.aspect_selector
        :width 112px
        :vertical-align middle
        :display inline-block
        :line-height 25px
        :text
          :decoration none

      a.tag_selector
        :width 117px
        :overflow hidden
        :position relative
        :display inline-block
        &:after
          :display inline-block
          :content ""
          :width 80px
          :height 25px
          :position absolute
          :top 0px
          :left 100px
        &:hover:after
          :background none

      li
        :height 25px
        .icons-check_yes_ok
          :height 18px
          :width 18px
          :display inline-block
          :margin-left 3px
          :vertical-align middle

        .icons-deletelabel
          :height 14px
          :width 14px
          :margin-top 4px

      li.unfollow,
      li.sub_nav_item
        :width 172px

      li.unfollow:hover,
      li.sub_nav_item:hover,
      li.hover
        @include border-radius(2px)
        :background
          :color lighten($blue,45%)
        .edit,
        .unfollow_icon
          :z-index 1
          :display inline-block
          .icons-monotone_close_exit_delete
            :height 16px
            :width 16px

  .user_card
    :margin-left 8px

.unread-setter
  :display none

.stream_container
  :min-height 500px

  h3
    :margin
      :bottom 0
  :border
    :left 1px solid $border-grey
  :padding
    :left 10px
    :top 20px
  :margin
    :left -10px
    :top -20px

#aspect_stream_header
  :padding 0 12px

.new_aspect,
a.toggle_selector
  :outline none
  :color $text-grey
  :font
    :style italic

  &:hover
    :color $link-grey

#community_spotlight
  .avatar
    :height 140px
    :width 140px

.user_card
  @include border-radius(3px)
  @include box-shadow(0,1px,5px,#ccc)
  :padding 10px
    :bottom 30px
  :margin
    :bottom 15px
    :right 10px

  :position relative

  :min-height 220px

  :vertical-align top

  :border 1px solid #ccc
  :display inline-block

  :width 140px

  .tags
    :color $text-grey

  h4
    :margin
      :bottom 0
    :padding
      :bottom 2px

  .dropdown
    :width 100%

.add_user_to_aspect
  :bottom 12px
  :right 5px
  :position absolute

#right_service_icons
  :text-align center
  :padding 10px
    :bottom 0

  .social_media_logos-facebook-24x24,
  .social_media_logos-twitter-24x24,
  .social_media_logos-tumblr-24x24,
  .social_media_logos-wordpress-24x24,
  .social_media_logos-email-24x24,
  .social_media_logos-feed-24x24,
  .social_media_logos-website-24x24
    :height 24px
    :width 24px

  a
    :display inline-block

.action_item
  :padding-right 5px

.accept_invitation_form,
.sign_up_form
  :min-height 350px
  :font-size 16px
  input[type='text'],
  input[type='password'],
  input[type='email']
    :font-size 16px !important
    :width 378px !important

  .diaspora_id_text
    :font-size 12px
    :text-align right
    :color $text-grey
    :margin
      :top -8px
    :padding 0

  .submit_field
    :text-align right

.accept_invitation_text
  :font
    :weight lighter

.red
  :color $red

.green
  :color green
.resend
  :color black
  &:hover
    :text-decoration none
    :color black
    &:hover
      :text-decoration none

#grey_header
  @include box-shadow(0,1px,1px,#eee)
  :background
    :color #fafafa
  :width 100%
  :position absolute
  :left 0
  :top 0
  :padding
    :top 80px
    :bottom 20px
  :text
    :align center
  :border
    :bottom 1px solid $border-grey

.mobile_row
  :margin
    :bottom 50px

.field_with_errors
  :position relative

  input
    @include box-shadow(0,0,8px,lighten(#D00,30%))
    :border 1px solid #D00 !important

.field_with_errors .message
  :color #D00
  :font-size 12px
  :position absolute
  :top 4px
  :right 10px
  :left auto

.new_user_form fieldset, .accept_invitation_form fieldset
  @include border-radius(3px)

  :background
    :color #fff
    :color rgba(255,255,255,0.95)

  .submit_field
    :margin
      :top 15px
  span.host_uri
    :float right
    :margin-top -28px
    :color $text-grey
    :padding-right 9px

.center
  :text-align center

.nostrap,
.nostrap:focus
  :-webkit-box-shadow none
  :-moz-box-shadow none
  :box-shadow none

#hello-there
  p
    :font-size medium
  h1
    :margin 0px
  h2
    :margin
      :top 80px
      :bottom 12px
  h3
    :font
      :size large
      :weight 200
    :margin 0px
  form, p
    :margin-left 30px
  input
    :margin-bottom 15px
  .hero-unit
    :margin 20px 42px
    :padding 40px 80px
  .awesome
    :text-align center
    :margin-top 60px
    .creation
      :font-size 16px

#profile_photo_upload
  #fileInfo
    :margin-top 12px
    :text-align left

#welcome-to-diaspora
  :-webkit-box-shadow inset 0 -2px 10px rgba(0,0,0,0.35)
  :-moz-box-shadow inset 0 -2px 10px rgba(0,0,0,0.35)

  :position absolute
  :width 100%
  :left 0
  :top 0
  :padding
    :top 50px
    :bottom 10px
  h1,h3
    :color #fff
    :text-overflow ellipsis
    :white-space nowrap
  :background orange
  &:hover
    #gs-skip-x
      @include opacity(0.4)
      @include transition(opacity, 0.25s)

      &:hover
        @include opacity(1)

#gs-shim
  :position absolute
  :top 380px

#gs-skip-x
  @include opacity(0)
  @include transition(opacity, 0.25s)

  img
    :position relative
    :right 4px
    :height 20px


.avatar.micro
  :height 20px
  :width 20px

#gs-name-form-spinner
  :position absolute
  :top 24px
  :right -33px

.left_nav
  #new_tag_following
    :width 137px
    :margin
      :left 24px

    input[type='text']
      :width 137px
      :font
        :size 13px

  #tag_following_submit
    &.hidden
      :display none

.nsfw-shield
  @include border-radius(3px)
  :background-color $background-grey
  :width 90%
  :padding 5px 10px
  :border 1px solid $border-grey
  :color $text-grey

#back-to-top
  :display block
  :color white
  :position fixed
  :z-index 49
  :right 20px
  :bottom 20px
  :opacity 0
  :font-size 3em
  :padding 0 11px 0 12px
  :border-radius 10px
  :background-color #aaa
  &:hover
    :opacity 0.85 !important
  &.visible
    :opacity 0.5

.float-right
  :float right
  :margin-top 5px

.nsfw_off
  :font-size smaller
  :color $text-grey
  a
    :color $text-dark-grey

#fileInfo
  :font-size small
  :text-align right
  :margin 5px 2px

.post_preview_button
  :padding 3px 9px 4px

.post_preview
  :padding
    :top 5px
  :border
    :bottom 3px solid #3f8fba !important
  :background
    :color #e8f7ff

#location
  :border 1px solid $border-dark-grey
  :height 20px
  #location_address
    :border none
    :color #aaa
    :height 10px
    :width 430px
    :float left
  a#hide_location
    :position absolute
    :right 22px
    :filter alpha(opacity=30)
    :-moz-opacity 0.3
    :-khtml-opacity 0.3
    :opacity 0.3
    :z-index 5
  a#hide_location:hover
    @include opacity(0)
    :-khtml-opacity 1
    :opacity 1
    :cursor pointer