diaspora/app/assets/stylesheets/application.css.sass
2014-03-30 13:37:31 +02:00

1619 lines
24 KiB
Sass

@import 'compass'
@import 'colors'
@import 'ui'
@import '_mixins'
@import '_flash_messages'
@import 'new_styles/_spinner'
@import 'sidebar'
@import 'sprites'
@import 'header'
@import 'footer'
@import 'opengraph'
@import 'help'
@import 'profile'
@import 'publisher_blueprint'
@import 'facebox'
@import 'aspects'
@import 'popover'
@import 'post_report'
@import 'stream_element'
/* ====== 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
:display inline-block
.icons-postreport
: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
.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
#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
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
.icons-heart
:height 12px
:width 13px
:display inline-block
:vertical-align top
:margin-top 3px
: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
.tag
:display inline-block
:max-width 100%
&:hover
:text
:decoration underline
: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 $text-grey
:border
:bottom 1px dotted $border-dark-grey
&:hover
:border
:bottom 1px solid $border-dark-grey
.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
.notification_count
:background
:color #f0f0f0
:color $text-grey
:font
:weight normal
:padding 0 5px
:left 11px
:margin
:right 5px
:border
:radius 5px
&.unread
:background
:color lighten($red, 5%)
:color #eee !important
:font
:weight bold
.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
.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
#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
.cubbies_images
:margin-left 15px
.cubbies_user_page_small
:position absolute
:left 270px
#featured_users_pane
:padding 10px 0
.featured_user_card_small
:height 30px
:vertical-align top
:position relative
:border
:bottom 1px solid $border-grey
:padding 5px
:margin
:bottom 5px
a
:font
:weight bold
.tags
a
:color $text-grey
.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
.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
#admin_nav
:font-size 1em
:border
:bottom 2px solid #777
:margin
:bottom 20px
ul
:display inline
li
:font-size 0.8em
:display inline
:margin
:right 0.5em
#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