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


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


.postboard
	width: $postboardWidth
	float: left

	h2, .postboard-news 
		display: none

.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
	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: 0 
	left: 3px
	font-size: 15px


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

.post-text
	margin: 0 0 0 ($mini-usr-img +10)
	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: 0 0 .8rem 0
	color: lighten($dark-grey,30%)
	span
		@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
	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