theme_nin/sass/layout/_postboard.sass

/*************  TOP TEXTAREA *************/
#postboard-top
	position: relative 
	@extend .clear-fix
	margin-bottom: 10px
	transition: height .3s linear
	padding: 15px
	background: white
	overflow: hidden
	background: $bloc-light-color
	+transition-property( top)
	+transition-duration(.1s)
	+transition-timing-function(ease-out)	
	top: 0
	+box-shadow(1px 2px 2px rgba(#111, 0.1))
	z-index: 120

	.profile-photo
		position: absolute
		top: 10px
		left: 10px
		width: $mini-usr-img
		img
			width: 100%
	.post-area
		overflow: hidden
		@extend .clear-fix
		width: 100%
		padding-left: 58px
		padding-right: 0
		display: inline
		+box-sizing(border-box)
		background: none
		float: right
		.post-area-new
			@extend .open
			+box-shadow(none)
			textarea
				margin: 0 0 10px 0

	&.onTop 
		position: fixed
		bottom: 0
		left: 0 
		top: auto
		margin-bottom: 0
		z-index: 2000
		+box-shadow(0 -5px 13px rgba(#111, 0.2))
		width: 320px
		max-width: 100%
		.profile-photo 
			display: none!important
		.post-area 
			padding-left: 0



/*************  POSTBOARD *************/


.postboard
	width: $postboardWidth
	float: left

	h2, .postboard-news 
		display: none

	&.large
		width: $postboardLargeWidth

.postboard-posts
	position: relative
	z-index: 1
	clear: both


	.post
		
		position: relative
		margin-bottom: 1px
		+transition-property(margin)
		+transition-duration(.5s)
		+transition-timing-function(ease-out)
		color: $defaut-font-color
		cursor: pointer

		&:hover 
			color: #000

		.show-more
			display: inline-block
			float: right
			font-size: .8rem
			color: lighten($dark-grey,30%)

			&:hover
				color: lighten($dark-grey,5%)
		.post-expand
			color: lighten($dark-grey,30%)
			background: $bloc-light-color
			cursor: pointer
			font-size: .8rem
			position: absolute
			left: 10px
			bottom: 10px
			&:hover
				color: lighten($dark-grey,5%)		
		.post-data
			padding:  15px 
			background: $bloc-light-color





	/*********** EVERYTHING SPECIFIC TO OPEN POSTS  **************/

	> .post
		+box-shadow(1px 2px 2px rgba(#111, 0.1))
		&.open
			margin-top: $space
			margin-bottom: $space
			+box-shadow(1px 2px 2px rgba(#111, 0))
			.post 
				color: darken($defaut-font-color, 15%)
				+box-shadow(1px 2px 2px rgba(#111, 0.1))
				margin-bottom: 1px
				&:not(.original)
					.post-expand
						display: none
						margin: 0			

.post-photo
	margin: 0
	display: inline-block
	float: left
	vertical-align: middle
	overflow: hidden
	width: $mini-usr-img
	margin: 0 15px 15px 0
	max-height: $mini-usr-img
	clear: both
	img
		width: 100%
		height: auto!important

.post-info-name
	font-weight: 500
	color: inherit
	text-decoration: none
	display: inline-block
	font-size: 1rem
	float: left
	&:hover
		text-decoration: none
		color: black

.post-info-tag
	font-size: .8rem
	opacity: .6
	margin-top: 4px
	display: inline-block

.post-info-sent
	display: block
	position: absolute 
	top: -10px 
	right: 0
	font-size: 15px


.post-info-time
	position: absolute
	font-size: .8rem
	line-height: .8rem
	text-decoration: none
	top: 12px
	right: 0
	padding-right: 11px
	text-align: right
	color: lighten($dark-grey,30%)
	&:hover
		color: lighten($dark-grey,5%)

.post-text
	margin: 0 0 0 ($mini-usr-img +15)
	word-wrap: break-word
	min-height: $mini-usr-img - 20
	padding: 0
	a:hover 
		text-decoration: underline


.post-context
	font-size: .8rem
	line-height: .8rem
	margin: 2px 0 4px 60px

	color: lighten($dark-grey,30%)


.post-rt-by
	margin: 0 0 1em
	div
		display: inline
	.prep:before, .prep:after
		content: ' '


.post-rt-icon
	@extend .ion-shuffle
	@extend .ion
	&:before
		display: block
		float: left
		color: $main-color-color

		line-height: .8rem
		font-size: .8rem

		margin-right: .4em


// .post-interactions (reply, retransmit, fav)

.post-interactions
	margin: 10px 0 3px 0
	text-align: right
	height: .8rem
	line-height: .8rem
	span
		color: lighten($dark-grey,30%)
		cursor: pointer
		font-size: .8rem
		line-height: .8rem
		@extend .ion
		position: relative
		margin-left: 7px
		display: none
		.open .original & 
			display: inline-block!important

		&:hover
			color: lighten($dark-grey,5%)
		&:before 
			padding: 3px
		&.post-reply
			@extend .ion-plus
		&.post-propagate
			@extend .ion-shuffle
		&.post-favorite
			@extend .ion-alert

	.post:hover &
		.post-reply, .post-propagate , .post-favorite 
			display: inline-block


.open .related
	.post-reply, 
	.post-propagate, 
	.post-favorite
		display: none!important
	&:hover
		.post-reply, 
		.post-propagate,
		.post-favorite
			display: inline-block!important


.expanded-content
	//display: none
	padding: 0
	@extend .clear-fix
	textarea 
		clear: left

.image-preview
	max-width: 100%
	width: auto
	display: block
	margin: auto

.preview-container
	width: 100%
	text-align: center
	overflow-y: auto
	background: black
	clear: both

.post-stats
	float: left
	clear: left
	li
		display: inline-block
		&.stat-count
			font-size: 12px
			float: left
			line-height: 20px
			@extend .ion-shuffle
			@extend .ion
			&:before 
				margin-right: 0
			span:last-child 
				display: none

	a
		position: relative
		text-decoration: none
		display: inline-block
		width: 20px
		height: 20px
		margin: 0 2px 0 0

		img
			width: 20px
			height: 20px
			+border-radius(3px)




//what appears on top of .avatar-row img on hover

.avatar-row
	margin-left: 5px
	a:hover 
		.user-name-tooltip 
			display: block

	.user-name-tooltip
		display: none
		position: absolute
		background: $main-color-dark
		font-size: 11px
		line-height: 11px
		white-space: nowrap
		padding:  5px
		+border-radius(3px)
		color: #fff
		top: -32px
		left: -10px
		&:after
			content: ""
			position: absolute
			width: 0
			left: 13px
			bottom: -5px
			border-top: solid 5px $main-color-dark
			border-left: solid 5px transparent
			border-right: solid 5px transparent

// Posts replies get left border to show threads

.post-replies .sub-replies
	border-left: solid 18px transparent




.post-rt-reference
	padding: 10px
	margin-top: 10px
	position: relative
	border: 1px solid #eee
	+border-radius(3px)
	&:hover
		background-color: #FFF
		cursor: pointer
	.post-photo
		display: none
	.post-info-name
		font-size: 12px
	.post-text
		margin: 5px 0 0 0
		clear: both
		font-size: 12px
		line-height: 130%		
	.post-info-time
		font-size: 80%
	.post-area
		padding-left: 0