diaspora/public/stylesheets/sass/application.sass

3384 lines
47 KiB
Sass

// licensed under the Affero General Public License version 3 or later. See
// the COPYRIGHT file.
@import 'mixins'
body
:padding 2em
:margin 0
:top 33px
:background-color $background
a
:color $blue
:text
:decoration none
&:hover
:color $blue
:text
:decoration underline
p
:word-wrap break-word
h1
:color #333
:position relative
:font
:weight bold
:letter
:spacing -1px
h1, h2, h3, h4
:margin
:bottom 5px
h1
:color #111
ul > li
:list-style none
form
:position relative
input,
textarea
label
:font
:size auto
.rtl
:direction rtl
:text-align right
.hidden
:display none
.avatar
:width 50px
:height 50px
#content
:background
:color #fff
:border 1px solid #ccc
:height 100%
#flash_notice,
#flash_error,
#flash_alert
@include box-shadow(0, 1px, 2px, #333)
:z-index 100
:position fixed
:color #fff
:top -100px
:left 0
:width 100%
:padding 1em
: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
@include box-shadow(0,0px,2px,#777)
@include linear-gradient(rgba(35,30,30,0.95),rgba(35,30,30,1))
:z-index 50
:padding 6px 0
:color #CCC
:height 26px
:position fixed
:width 100%
:top 0
:left 0
&.fixit
:position fixed
:top -30px
a
:color #CCC
:color rgb(147,147,147)
&: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
:color rgb(147,147,147)
:width auto
:cursor pointer
:z-index 10
:padding 5px 0
:left 32px
:right 7px
:margin 0
:top -2px
:right -5px
:background
:color rgba(24,20,20,0.5)
:border
:left 1px solid #333
:right 1px solid #333
:position absolute
:display inline
:top -4px
:right 0
&:hover
:background
:color #222
li
a
:padding 4px
:height 100%
&:hover
:background
:color $blue
:color #fff
:text
:decoration none
&:first-child
:padding 5px 0
a
:padding
:right 15px
&:hover
:background
:color #222
:text
:decoration 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 20px
:width 20px
:position absolute
:left 4px
:top 5px
:display block
//////////////////////////////////
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
>li.as-original
:width 100% !important
>input
:width 100% !important
:color #999
//////////////////////////////////
.unread
:background-color #E6E6E6
:color #333 !important
time
:color #333 !important
.diaspora_header_logo
:position relative
:top 5px
:margin
:right 49px
&:active
:top 5px
.stream
audio
:display block
:margin 5px 0
.stream_element
:padding 15px
:min-height 50px
:border
:bottom 1px solid #ddd
&:first-child
:border
:top none
.youtube-player, .vimeo-player
:border none
:height 304px
:width 410px
.comment
.comment_info
:font
:size smaller
.from
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
:position relative
:display inline
:margin
:right 1px
:bottom -1px
#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
#conversation_inbox a
&:hover
:text
:decoration none
.stream_element
:position relative
:word-wrap break-word
:color #555
:font
:size 13px
a.author
:font
:weight bold
:color #444
.content
:margin
:top 0
:padding
:left 60px
:font
:weight normal
p
:margin
:top 0
:bottom 10px
:font
:size 12px
:line
:height 18px
.photo_attachments
:margin
:top 7px
img
:margin
:right 0
:max-width 100%
.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 11px
.comments
.info
:margin
:top -1px
.delete
@include opacity(0.3)
:padding 5px
&:hover
@include opacity(1)
.right
:position absolute
:right 12px
.controls
@include transition(opacity)
@include opacity(0)
:z-index 6
:color #999
a
:color #999
:font
:weight normal
&:hover, .comment:hover
> .controls
@include opacity(1)
.from
a
:color $blue
.status_message_show
.stream_element
.content
p
:font
:size 1em
.comment_box
:width 653px
:margin
:bottom 5px
.post_initial_info
:margin
:bottom 5px
.from
.details,
.details *
:color #aaa
: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
:text
:align right
ul.comments,
ul.show_comments,
.likes_container,
.stream_element .reshare
.avatar
:width 30px
:height 30px
:margin 0
:padding 0
:font
:size 12px
:line
:height 18px
:position relative
li
:list
:style none
:padding 8px 5px
:border
:bottom 1px dotted #aaa
.from
:font
:size 1em
:margin
:bottom 0px
.youtube-player, .vimeo-player
:border none
:height 250px
:width 400px
.content
:margin
:top 0px
:bottom -2px
:padding
:left 36px
:right 10px
p
:margin
:bottom 0
:top 0
.right
:right 4px
.avatar
:position absolute
:display inline
.stream_element .reshare
:padding
:left 10px
:border-left 2px solid #ddd
:margin
:top 5px
:bottom 10px
ul.show_comments
:padding
:bottom 6px
:margin
:top 6px
form.new_comment
:padding 8px 5px
.avatar
:position absolute
:display inline
:width 30px
:height 30px
:min-height 35px
input
:display none
:margin
:bottom -4px
:font
:size 1em
.submit_button
input
:margin
:right 0
textarea
:width 365px
:height 21px
:font
:size 1em
:margin
:top 0
:bottom -3px
p
:margin
:bottom 0
:top -10px
:position relative
:left 35px
&.open
.submit_button
:display block
:margin
:top 5px
:bottom 2px
:right 2px
input
:display inline-block
.comment
.like_action
@include transition(opacity)
@include opacity(0)
&:before
:content " · "
&:hover
.like_action
@include opacity(1)
.likes,
.likes_container
:display inline
:padding 0
:margin 0
:font
:size 10px
a
:font
:weight normal
img
:margin 0
:height 9px
:width 9px
:top 1px
.likes
:margin
:left 5px
.stream.show
ul.comments
li
:padding
:right 135px
textarea
:margin
:bottom 5px
.profile_photo
img
:height 200px
:width 200px
#profile
h3
:margin
:bottom 0
ul
:margin 0
:padding 0
ul#profile_information
:margin 1em 0
> li
:margin
:bottom 2em
a.paginate, #infscr-loading
:display block
:margin
:top 10px
:padding 8px 0
:text-align center
:width 100%
&:hover
:border 1px solid #1C6D99
#main_stream .pagination
:display none
.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
:color #333
#debug_info
:margin-top 50px
:color #ccc
h5
:color #ccc
input:not([type='submit']):not([type='reset']):not([type='hidden']),
textarea
@include border-radius(2px)
:font
:family 'Arial', 'Helvetica', sans-serif
:size 14px
:padding 0.3em
:display block
:width 100%
:border 1px solid #ccc
:height auto
input[type='checkbox']
:width auto !important
.submit_block
:text
:align right
form p
:position relative
:padding 0
:margin 0
form p.checkbox_select
:width 75%
label
:left 25px
: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 0
:top 0
:border
:bottom 1px #eee solid
form
textarea
:resize none
:width 455px
:margin 0
&.mention_popup
:padding 1px 12px
:margin
:bottom 0
:border
:bottom none
&.closed
.options_and_submit
:display none !important
textarea
:height 18px !important
.counter
:display none
&:not(.closed)
textarea
:margin
:bottom 30px
form
:position relative
:top 0
label
:font
:size 14px
.options_and_submit
:min-height 21px
:clear both
:position relative
:padding
:top 6px
:margin
:bottom -2px
input
:display inline
.public_toggle
:text
:align right
#publisher_service_icons
:position relative
:top 3px
:margin
:right 10px
.mention_helper
:float left
#fileInfo
:display inline
:position relative
:top -2px
.content_creation
:margin
:top 1em
#file-upload
:position absolute !important
:bottom 1px !important
:right 6px
:z-index 10
:margin 0
:display inline-block
:padding 0.3em
:cursor pointer
img
@include opacity(0.4)
:display inline-block
:margin 0
:padding 0
:margin
:bottom -3px
&:hover
:background
:color none
:cursor pointer
:color #666
img
@include opacity(0.8)
&:active
:text-shadow 0 1px 0 #fafafa
:color #444
img
@include opacity(1)
&.loading
@include opacity(0.5)
#publisher_textarea_wrapper
#hide_publisher
@include opacity(0.3)
: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 70px
#photodropzone
:z-index 3
:position absolute
:bottom 0
:width 435px
:left 5px
:padding 0
li
:display inline-block
:margin-right 4px
img
:width 50px
.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
.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
header #global_search
:display inline
:position relative
form
:display inline
input
@include box-shadow(0,1px,0px,#444)
:display inline
:background-color #ccc
:border
:top 1px solid #111
:font
:size 12px
:border 1px solid #000
&:hover
:background-color #eee
&.active
:background-color #fafafa
input[type='search']
:width 250px
:padding 3px
.aspect
h3
:display inline-block
.tip
:display none
:color #999
:margin
:left 0.5em
.edit_name_field:hover
.tip
:display inline
.aspect_name
:position relative
ul.tools
:position absolute
:top 3px
:right 0
:display inline
:padding 0
:margin 0
li
:display inline
:margin
:right 1em
&:last-child
:margin
:right 0
.requests
ul.dropzone
:max-width 124px
.aspect,
.requests
:color #999
:cursor default
:text-shadow 0 1px #fff
ul.dropzone
@include border-radius(10px)
:position relative
:min-height 65px
:margin 0
:bottom 25px
:padding 15px
:border 2px dashed #ccc
&.active
:background
:color rgba(255,252,127,0.2)
.draggable_info
:position absolute
:display none
:right 15px
:bottom 10px
:font
:style italic
:size 14px
:color #aaa
.person
:display inline-block
:cursor move
:z-index 3
:position relative
:padding 0
:margin 5px
:color #eee
img
@include border-radius(5px)
:height 50px
:width 50px
a:hover
:cursor move
&:hover
.delete
:display inline
&:active
:z-index 20
img
@include box-shadow(0,1px,3px,#000)
.delete
:display none
.delete
:display none
:position absolute
:top -8px
:left -8px
.circle
@include border-radius(20px)
@include box-shadow(0,1px,3px,#000)
:z-index 1
:position absolute
:background
:color #333
:width 20px
:max-width 20px
:height 20px
:max-height 20px
:border 1px solid #fff
.x
:z-index 2
:position absolute
:top 2px
:left 7px
&:hover
:cursor default
.circle
:background
:color rgba(208,49,43,1)
.requests
:position fixed
:background-color rgb(252,252,252)
.aspect
:margin-right 20px // overwriting default of 10px from grid
&.last
:margin-right 0
&.span-12
:width 465px // overwriting default of 470px from grid
.requests
ul.dropzone
:border 2px solid #ccc
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
.description
:font
:size 80%
:weight 200
input[type="search"]
:-webkit-appearance textfield
:-moz-appearance textfield
.facebox_content
:display none
#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 1em
h2
:display inline
.right
:margin
:top 10px
.modal_title_bar
:width 100%
:background
:color #333
:margin
:bottom 2em
h4
:color #fff
:padding 10px 20px
:font
:size small
#show_text
:font
:size 24px
:family "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif
.time
:color #888
:font
:size 18px
:weight bold
.photo_options
:color #ddd
:text
:align center
ul.aspects
:margin 0
:padding 0
:font
:size 24px
> li
:padding 12px 0
:border
:bottom 1px solid #eee
&:hover
:background
:color #fafafa
.right
:top 12px
:right 12px
.delete
@include border-radius(10px)
:background
:color #eee
:width 20px
:height 20px
:line-height 16px
:text-indent 6px
:font-size 16px
.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
.inline_aspect_listing
:margin 0
:padding 0
:display inline
> li
:display inline
:font
:weight normal
&:after
:content ", "
&:last-child
&:before
:content "and "
&:after
:content "."
#previous_step
:position absolute
:left 12px
:bottom 12px
#user_photo_uploader
.avatar
@include border-radius(5px)
:height 100px
:width 100px
#publisher_photo_upload
:position absolute
:display inline
:left 600px
:top 0
:z-index 10
#profile_photo_upload
:margin
:top 5px
:min-height 100px
img
@include border-radius(5px)
@include box-shadow(0,1px,2px,#666)
:position absolute
:left 0
:height 100px
:width 100px
:padding
:left 120px
h3 span.current_gs_step
:color #22C910
#notifications
:z-index 10
:position fixed
:bottom 21px
:right 12px
.notification
@include border-radius(5px)
@include box-shadow(0,2px,3px,#333)
:margin
:bottom 10px
:background
:color rgb(30,30,30)
:color rgba(30,30,30,0.9)
:min-width 200px
:padding 12px
:color #fff
:vertical
:align middle
.avatar
:display inline-block
:height 20px
:width 20px
:margin
:right 5px
:vertical
:align middle
.bottom_notification
:position fixed
:bottom 0
:left 0
:width 100%
:background
:color rgba(63,143,186,0.8)
:text
:align center
:font
:size 14px
:weight bold
:color #fff
:padding 12px
:bottom 10px
a
@include border-radius(10px)
:color #fafafa
:background
:color $blue
:padding 8px
&:hover
:background
:color #22AAE0
#nav_badges
:position absolute
:display inline-block
:min-width 170px
:top 3px
:left 460px
:margin
:left 20px
a:hover
:text
:decoration none
.badge
:position relative
:top 2px
:display inline
:margin 0 2px
:padding 8px 3px
:bottom 9px
:font
:weight bold
:size smaller
:width 28px
&:hover
.badge_count
:background
:color lighten(#A40802, 5%)
#message_inbox_badge
img
:position relative
:top -2px
#notification_badge
img
:position relative
.badge_count
@include border-radius(2px)
:z-index 3
:position absolute
:top -2px
:left 13px
:padding 0 2px
:bottom 1px
:background
:color #A40802
:line
:height 12px
:color #fff
#profile
ul#aspects_for_person
> li
:display inline-block
:padding 4px 6px 0 0
a
:padding 2px 4px
:margin
:left -3px
:background
:color #eee
:font
:size smaller
:border 1px solid #ccc
:top 1px solid #ddd
:bottom 1px solid #aaa
:color #777
:text-shadow 0 1px #fff
&:hover
:background
:color #ccc
:border 1px solid #999
:top 1px solid #bbb
:bottom 1px solid #777
:color #444
&:active
:background
:color #666
:border 1px solid #555
:top 1px solid #777
:bottom 1px solid #222
:color #eee
:text-shadow none
a:first-child
@include border-radius(2px)
:-webkit-border-radius 6px 0 0 6px
:-moz-border-radius 6px 0 0 6px
:border-radius 6px 0 0 6px
a:last-child
:-webkit-border-radius 0 6px 6px 0
:-moz-border-radius 0 6px 6px 0
:border-radius 0 6px 6px 0
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
.contact_list_controls
:height 30px
:margin
:bottom 5px
:vertical-align middle
:position relative
#contact_list_search
:width 200px
:margin
:top 0
:float right
.contact_list,
.aspect_list
@include border-radius(3px)
:height 300px
:max-height 300px
:overflow-y auto
:overflow-x hidden
:border 1px solid #bbb
:background
:color rgb(252,252,252)
.diaspora_id
:color #777
:font
:size smaller
.avatar
:float left
:height 50px
:width 50px
:margin
:right 10px !important
.button.share
:padding
:right 20px
.right
:right 8px
:top 3px
> ul
:margin 0
:padding 5px
:right 0
> li
@include border-radius(3px)
:background
:color #fff
:overflow-x hidden
:overflow-y hidden
:position relative
:display inline-block
&.hidden
:display none
:height 50px
:width 170px
:margin
:bottom 5px
:right 5px
:padding 8px
:border 1px solid #ccc
> .right
:right -5px
:bottom 2px
&.remote_friend
:width 285px
a.button
@include box-shadow(0,0,0)
:border
:bottom none
:height 12px !important
:width 12px !important
:padding
:right 4px
:left 4px
&.added
@include linear-gradient(rgb(158,255,153), rgb(92,199,86))
&.added.remove
@include linear-gradient(rgb(255,153,153), rgb(199,86,86))
&:active
@include linear-gradient(rgb(199,119,119), rgb(130,55,55))
.aspect_list
:height 300px
:max-height 300px
.name
:left 1em
ul
> li
:padding 1em
:height 1em
.right
:top 2px
:right 1em
footer
:width 100%
:left 0
:bottom 0
:color #999
.container
:margin
:top 4em
:padding 0
:top 0.5em
:border
:top 1px solid #ddd
img
:position relative
:top 2px
ul#footer_nav
:margin 0
:padding 0
:display inline-block
:float right
> li
:display inline
:margin
:right 1em
&:last-child
:margin 0
a
:color #777
ul#landing_nav
:margin 0
:padding 0
:font
:size 14px
> li
:display inline
:margin
:right 0.5em
a
:color $blue
&.login
@include border-radius(5px)
@include box-shadow(0,1px,1px,#666)
:padding 5px 8px
:background
:color #000
:border
:top 1px solid #000
&:hover
:background
:color #222
:text-shadow 0 1px 0 #000
#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 #888
: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(0,123,194),rgb(65,182,250))
: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 url('../images/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 #888
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
h3,h4
:padding
:bottom 5px
.big_buttons
input
:width 100%
:padding
:top 10px
:bottom 10px
:color #666
#original_post_info
p
:color #999
:margin
:bottom 2em
.what_is_this
:position relative
:top 3px
&:hover
@include opacity(0.5)
#edit_aspect_trigger
:font
:size 12px
#already_invited_pane
h4
:color #666
:color #666
#search_title
:font
:weight 200
.term
:font
:weight bold
.aspect_badge
@include border-radius(3px)
:color #fff
:line-height auto
:padding 0 4px
:margin
:right 4px
:bottom 4px
:line
:height 14px
a
:color #fff
:display inline-block
:font
:size smaller
:weight normal
:text
:shadow none
:cursor default
a
:color #fff
:font
:weight normal
&:hover
:text
:decoration none
.aspects
:position relative
:margin
:top 1em
.right
:right 12px
.contact_list
:height auto
:max-height auto
:width 500px
.aspects .aspect_badge
:font
:size 1em
.aspect_badge.public
:background
:color #C0E76C
.aspect_badge.single
:background
:color #999
&:hover
:background
:color #bbb
&:active
:top 0px
.aspect_badge.removed
:background
:color #FA2A00
:text
:decoration line-through
&:hover
:background
:color #FA2A00
.stream
.avatar
:float left
.aspect_badge
:position relative
:margin
:bottom 0
.aspect_badge
:top -0.2em
.share_with
:min-width 430px
.avatar
:width 50px
:height 50px
:float left
h4,p
:padding
:left 64px
p
:color #eee
#aspects_list
:height auto
#new_request_list
:margin 0
:bottom 2em
:padding 0 1em
li
:padding 0.5em 0
:border
:bottom 1px solid #eee
.avatar
:height 30px
:width 30px
.content
:padding
:left 40px
.right
:top 6px
:right 0
.notifications_for_day
.stream_element
:margin
:bottom 0.3em
:padding 0.2em 0.5em
:width 500px
@include border-radius(5px)
&:hover
:background-color #EFEFEF
.day_group
:min-height 100px
:margin
:bottom 10px
.stream_element
&:last-child
:border none
.stream.notifications
> li:hover
:background none
:border
:bottom 1px solid #eee
#photo_controls
:color #ddd
:position relative
:z-index 10
ul.show_comments
:border
:top 1px dotted #aaa
ul.show_comments,
.likes_container
a
:color #999
.likes_container
:margin
:bottom -4px
:padding 4px
ul.show_comments,
.likes_container
img
:position relative
:top 2px
:height 12px
:width 12px
.mark_all_read
:position relative
:top 10px
#aspect_edit_pane
:width 810px
.person_tiles
.tile
@include border-radius(2px)
:padding 6px
:left 65px
:margin 3px
:left 0
:display inline-block
:width 126px
:height 50px
:border 1px solid #eee
:position relative
img
:position absolute
:left 6px
&.larger
:width 650px
#facebox_header
:position relative
:padding
:bottom 10px
.right
:z-index 3
:right 1em
:top 14px
:color #ccc
img
:vertical
:align top
:position relative
:top 0px
h3,
h4
.description
:margin
:top 0px
.tiny_text
:font
:size 11px
:weight normal
#aspect_edit_controls
:margin
:top 8px
#home_user_badge
:position relative
img
:position absolute
:left 0
h3
:position relative
:top 13px
:padding
:bottom 5px
:margin
:bottom 54px
:padding
:left 60px
#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 #eee
:border 1px solid #ccc
.webfinger_form
input[type='search']
:width 100%
#sort_by
:float right
:color #777
.controls
:font
:weight 700
a
:font
:weight normal
#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
.stream_element
.subject
:font
:size 13px
:weight bold
:color #444
:overflow hidden
:white-space nowrap
.last_author
:font
:size 12px
:color #777
.conversation_participants
:z-index 3
:background
:color $background
:position fixed
:margin
:bottom 10px
:-webkit-box-shadow 0 2px 3px -3px #666
:-moz-box-shadow 0 2px 3px -3px #666
:box-shadow 0 2px 3px -3px #666
.right
:top 118px
:right 5px
h3
:margin 0
:top 6px
:bottom 0px
:padding
:bottom 10px
.avatar
:height 30px
:width 30px
:line
:height 0
.conversation_controls
a
:margin
:right 10px
:margin
:bottom 10px
:border
:bottom 1px solid #ddd
:padding 15px
:top 101px
:bottom 10px
:width 560px
:margin
:top -100px
.avatars
:text
:align right
:margin
:top 9px
.stream_element.new_message
:border
:top 1px solid #999
:bottom none
&:hover
:border
:bottom none
textarea
:margin 0
:bottom 0.5em
:width 100%
.right
:right -11px
.stream_element.conversation
:padding 10px
:min-height 0px
.message_count
@include border-radius(5px)
:float right
:right 0px
:padding 0 5px
:position relative
:background
:color #999
:color #eee
:font
:size 12px
:weight normal
.unread_message_count
@include border-radius(5px)
:float right
:right 5px
:padding 0 5px
:position relative
:background
:color #b11
:color #eee
:font
:size 12px
:weight normal
.participant_count
:font
:weight normal
.timestamp
:position absolute
:right 10px
:font
:weight normal
:color $blue
.avatar
:display inline
:width 35px
:height 35px
:margin
:right 10px
&:hover:not(.selected)
:background
:color #fafafa
&.selected:hover
:background
:color lighten($blue,5%)
&:hover
:cursor pointer
.conversation.unread
:background
:color darken($background,5%)
.conversation.selected
:background
:color $blue
.subject
:color #fff
.last_author
:color #fff
.timestamp
:color #eee
:border
:bottom 1px solid darken($blue, 10%)
:top 1px solid darken($blue, 10%)
#conversation_inbox
:height 100%
:overflow-y auto
:overflow-x none
#left_pane
:position fixed
:width 337px
h3
:padding
:bottom 0
:margin
:bottom 15px
#left_pane_header
:padding 10px
:height 55px
:border
:bottom 1px solid #ddd
#no_conversation_text
:font
:size 20px
:weight bold
:color #ccc
:text
:align center
:margin
:top 100px
#no_conversation_controls
:text
:align center
:font
:size 12px
#contact_visibility_padlock:hover
@include opacity(0.7)
.side_stream
.stream_element
:padding 10px 0
.avatar
:float left
.tag
:display inline-block
&:hover
:text
:decoration none
:background
:color lighten($blue, 47%)
:font
:weight bold
h1.tag
:border
:bottom 2px dotted $blue
&:hover
:border
:bottom 2px dotted $blue
.info
.tag
:background
:color #efefef
:color #999
:border
:bottom 1px dotted #999
&:hover
:border
:bottom 1px solid #999
.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
.friend_finder
.share_with
:background
:color rgb(245,245,245)
#contacts_of_contact
.section
:margin
:bottom 4px
.see_all
:text-align center
.avatar
:height 45px
:width 45px
.date
:background
:color #e6e6e6
:border-radius 8px
:padding 5px
:color #999
:text-align center
.day
:font-size 50px
:font-weight 200
:margin-bottom -15px
:margin-top -10px
.month
:font-size 14px
.notification_count
:background
:color #f0f0f0
:color #999
:font
:weight normal
:padding 0 5px
:left 11px
:margin
:right 5px
:border
:radius 5px
&.unread
:background
:color lighten(#A40802, 5%)
:color #eee !important
:font
:weight bold
.rightBar
.title
:position relative
:border
:bottom 1px solid #ddd
:padding 2px 0
:top 0
:left 22px
&.no_icon
:padding
:left 8px
.right
:right 4px
:top 3px
:font-size smaller
:font-weight bold
:color #777
h5
:font-size 12px
:margin 0
:color #666
img
:position absolute
:left 3px
:top 0px
.section
.content
:padding 8px
:color #999
:font-size 11px
:margin
:bottom 25px
.subtle
:color #888
:font
:style italic
.cubbies_steps
li
:margin
:bottom 12px
:vertical-align top
.cubbies-settings-image
@include box-shadow(3px, 3px, 15px, #333)
:margin
:bottom 5px
.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%))
#facebox
input[type='text'], input.text
:width 98%
#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
.canvas
.image-element,
.stream_element
:border none
:padding 20px
:height 170px
:width 170px
:min-height 170px
:min-width 170px
:display inline-block
:vertical-align middle
:text-align center
img
:position relative
:max-width 100%
:max-height 100%
.via
:text-align left
:font-size 11px
.hold-me
:display inline-block
ul.left_nav
:margin 0
:bottom 20px
:padding 0
li
:position relative
:width 100%
a.aspect_selector,
a.home_selector,
a.tag_selector,
a.element_selector
&:active
:cursor -webkit-grabbing
:cursor -moz-grabbing
:cursor grabbing
a.aspect_selector,
a.home_selector,
a.tag_selector,
a.element_selector,
.root_element
:display block
:width 100%
:padding 3px 7px
.root_element
:font-weight 700
a.aspect_selector,
a.home_selector,
a.tag_selector,
a.element_selector
&:hover
@include border-radius(2px)
:background
:color lighten($blue,45%)
:text
:decoration none
li.active
> a:not(.sub_selected)
:color #333
:font
:weight 700
.contact_count
:font
:weight 700
:color #666
.contact_count,
.edit,
.unfollow_icon
:float right
.unfollow_icon
:margin-top 4px
.edit
:margin-top 4px
:display none
.contact_count
@include border-radius(4px)
:margin-top 1px
:color #999
:background
:color #eee
:padding 0 5px
:display inline
:font
:size 11px
ul.sub_nav
:padding 0
:margin 0
li
:width 155px
a.aspect_selector,
.new_aspect,
a.tag_selector
:padding
:left 15px
:width 182px
.section
.contact_count
:display none !important
.all_contacts
:display none !important
.left_nav
a.aspect_selector,
a.home_selector
:width 150px
ul.sub_nav
:width 140px
a.aspect_selector,
.new_aspect,
a.tag_selector
:width 140px
li:hover
.edit
:display inline-block
.stream_container
:min-height 500px
h3
:margin
:bottom 0
:border
:left 1px solid #ddd
:padding
:left 10px
:top 20px
:margin
:left -10px
:top -20px
#aspect_stream_header
:padding 0 12px
.new_aspect
:color #999
:font
:style italic
&:hover
:color #777
.no_contacts
:position relative
:text-align center
:top 50px
#people_stream.contacts
.stream_element
:padding 10px
:min-height 30px
.right
:top 16px
a
@include opacity(0.3)
&:hover
@include opacity(1)
.from
:position relative
a
:color rgb(85,80,80)
.content
:padding
:left 40px
.info
:margin
:top -2px
.avatar
:height 30px
:width 30px
#aspect_controls
@include border-radius(2px)
:background
:color #fafafa
:border 1px solid #ccc
:padding 10px
:min-height 23px
.conversation_button
:float right
#selected_aspect_contacts
.avatar
:height 32px
:width 32px
:margin
:bottom -2px
#view_all_contacts_link
@include border-radius(2px)
:display block
:padding 5px
:border 1px dotted #aaa
:text-align center
:margin 5px 0
.bottom_submit_section
:display block
:position relative
form
:display inline-block
:text-align right
#no_contacts
:text-align center
:padding 10px
:background
:color #eee
:color #666
.left
:position absolute
:left 0
.big_stream_photo
:display block
#view_all_notifications
:float right
:margin
:right 3px
:font
:weight bold
#notification_dropdown
@include dropdown-shadow
:background white
:border solid #888 1px
:position absolute
:top 32px
:left 543px
:width 380px
:display none
:color #444
a
:color $blue
.header
:padding 10px
h4
:padding
:bottom 0
:margin
:bottom 0
.notification_element,
.header
:border
:bottom 1px solid #ddd
.ajax_loader
:text-align center
:padding 15px
.notification_element
:padding 10px
:min-height 30px
> img
:height 30px
:width 30px
:float left
:margin
:right 10px
&.unread
:background
:color #eee
:color #000
:font
:weight bold
#notification_badge.active
:z-index 10
:background
:color #fff
:border 1px solid #888
:bottom none
:margin
:left 0px
:padding
:bottom 10px
.cubbies_collage
:position absolute
:right 50px
:top -50px
:z-index -1
.cubbies_screenshot
:position absolute
:right -20px
:z-index 1
.cubbies_infographic
:height 450px
:margin
:top 30px
#featured_users
.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 #999
h4
:margin
:bottom 0
:padding
:bottom 2px
.dropdown
:width 100%
.add_user_to_aspect
:bottom 12px
:right 5px
:position absolute
ul#getting_started
:padding 0
:margin 0
> li
:position relative
:border
:bottom 1px solid #ddd
:padding
:top 25px
:bottom 5px
.content
:padding
:left 30px
input[type='search']
:width 210px
&.completed
@include opacity(0.4)
@include transition(opacity, 0.2s)
&:hover,
&:active
@include opacity(1)
.content h3
:text
:decoration line-through
.profile
:min-height 170px
#getting_started_profile_photo
:float right
.avatar
:height 150px
:width 150px
:margin
:left 5px
#edit_profile_button_div
:padding
:top 90px
:bottom 20px
#getting_started_service_icons
:text-align center
img
:margin
:right 48px
:padding
:bottom 20px
:top 10px
#right_service_icons
:text-align center
:padding 10px
:bottom 0
#diaspora_hq_pane
:padding
:bottom 20px
:min-height 70px
.add_to_aspect
:padding 10px 0
.avatar
:float left
:margin
:right 10px
:height 70px
:width 70px
.name
:font
:weight bold
.cubbies_images
:margin-left 15px
.cubbies_user_page_small
:position absolute
:left 270px
.getting_started_number
:position absolute
:left 0
h3
:display inline
:background
:color #eee
:padding 3px 7px
:margin
:right 8px
.profile .profile_field
:background
:image url('/images/icons/monotone_question.png')
:position center left
:repeat no-repeat
:padding
:left 20px
&.completed
:background
:image url('/images/icons/check_yes_ok.png') !important
#featured_users_pane
:padding 10px 0
.featured_user_card_small
:height 30px
:vertical-align top
:position relative
:padding 5px
:margin
:bottom 5px
a
:font
:weight bold
.tags
a
:color #999
.avatar
:height 30px
:width 30px
:margin
:right 5px
:float left
.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
p
:margin
:bottom 14px
.diaspora_id_text
:font-size 12px
:text-align right
:color #999
:margin
:top -8px
:padding 0
.submit_field
:text-align right
.accept_invitation_text
:font
:weight lighter
#back-to-top
:display block
:color white
:position fixed
:right 20px
:top 50px
:opacity 0
:font-size 3em
:padding 0 12px 0 12px
:border-radius 10px
:background-color #82D400