diaspora/app/assets/stylesheets/application.css.sass
op48 844fe9d6b9 Allow users to delete own photos from gallery
Added delete label to photos in gallery

added an event to delete photos of current user

Added css for hiding/revealing the delete label

Included the photo stylesheet

Added cucumber test for deleting your own photos

Removed wip
2014-08-19 10:11:06 +01:00

1476 lines
22 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 'poll'
@import 'help'
@import 'profile'
@import 'publisher_blueprint'
@import 'facebox'
@import 'aspects'
@import 'popover'
@import 'stream_element'
@import 'report'
@import 'new_styles/_forms'
@import 'tag'
@import 'photo'
/* ====== 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
.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
.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