pillar/src/styles/_comments.sass

$comments-width-max: 710px

.comments-container
	position: relative

	#comments-reload
		text-align: center
		cursor: pointer
		padding: 15px 0
		display: block

	.comments-list
		&-loading
			+spin
			color: $color-background
			font-size: 2em
			margin-bottom: 10px
			position: relative
			text-align: center
			top: 25px

		&-title
			padding: 15px 0 10px 0
			font-size: 1.3em
			font-weight: 300
			color: $color-text-dark-hint

		/* Each comment on the list*/
		.comment-container,
		.comment-reply-container
			display: flex

			position: relative
			padding: 15px 0 20px 0
			transition: background-color 150ms ease-in-out, padding 150ms ease-in-out, margin 150ms ease-in-out

			&.comment-linked
				background-color: $color-background-light !important
				box-shadow: inset 3px 0 0 $color-info
				padding-right: 20px

				&:before
					bottom: 25px
					color: $color-info
					content: 'Linked Comment'
					font-size: .8em
					position: absolute
					right: 20px
					text-transform: uppercase

				&.is-replying
					margin-bottom: 15px !important

				.comment-avatar
					padding-right: 5px
					padding-left: 5px

			.comment-avatar
				padding-right: 10px

				img
					border-radius: 50%
					height: 24px
					margin-top: 5px
					width: 24px

			p.comment-author
				color: $color-text-dark
				display: inline-block
				float: left
				font-weight: bold
				margin-right: 8px
				white-space: nowrap

				&.op
					color: $color-primary-dark

			.comment-time
				padding-left: 10px
				margin-left: 10px
				color: $color-text-dark-hint

				&:before
					content: '·'
					position: relative
					left: -10px
					font-weight: 600

			/* The actual comment body. */
			/* Here we style both the preview comment and posted comments */
			.comment-content,
			.comment-reply-form
				+node-details-description
				+media-xs
					max-width: 100%
				+media-sm
					max-width: 100%
				+media-md
					max-width: $comments-width-max
				+media-lg
					max-width: $comments-width-max

				color: darken($color-text-dark, 10%)
				font:
					size: 1em
					weight: normal
				transition: background-color 200ms ease-in-out, margin 200ms ease-in-out
				margin: 0
				border: thin solid transparent

				+media-xs
					padding:
						left: 0
						top: 15px

				p
					+media-xs
						padding:
							left: 0
							right: 0

					line-height: 1.4em
					margin-top: 5px

					&:last-child
						margin-bottom: 10px

					&.comment-author
						margin-bottom: 0

				strong, b
					font-weight: 500
					color: $color-info

				img.emoji
					padding-top: inherit
					padding-bottom: inherit

				.editing
					background-color: $color-background-light
					margin-bottom: 10px
					border-color: $color-background-dark
					border-radius: 3px

					textarea
						box-shadow: none
						width: 100%

			.comment-content
				display: flex
				flex-direction: column
				padding-bottom: 0
				width: 100%

			/* Rating, and actions such as reply */
			.comment-meta
				+media-xs
					padding:
						left: 0
						right: 0

				align-items: center
				color: $color-text-dark-secondary
				display: flex
				font-size: .9em

				/* Small container for rating buttons and value */
				.comment-rating
					display: flex
					align-items: center

					&.rated
						color: $color-text-dark-secondary
						.down
							color: $color-downvote

					&.rated.positive
						color: $color-upvote
						.down
							color: $color-text-dark-secondary

						.comment-action-rating.up:before
							content: '\e83f'


					.comment-rating-value
						padding-right: 15px
						color: $color-text-dark-secondary
						cursor: default

					.comment-action-rating
						cursor: pointer
						font-family: 'pillar-font'
						height: 25px
						position: relative
						top: 4px
						width: 16px

					.comment-action-rating.up
						&:hover
							color: $color-upvote
						&:before
							content: '\e83e'
							top: 2px
							position: relative

					.comment-action-rating.down
						&:hover
							color: $color-downvote
						&:before
							content: '\e838'

				/* Reply button */
				.comment-action-reply
					color: $color-primary

				.comment-action-reply,
				.comment-action-edit
					padding-left: 10px
					margin-left: 10px

					&:before
						color: $color-text-dark-secondary
						content: '·'
						font-weight: 600
						left: -10px
						position: relative

					span
						cursor: pointer
						&:hover
							color: $color-primary

					span.edit_save,
						color: $color-success
						display: none
						&:hover
							color: lighten($color-success, 10%)

						&.error
							color: $color-danger

						&.saving
							user-select: none
							pointer-events: none
							cursor: default

							i
								font-size: .8em
								margin-right: 5px

					span.edit_cancel
						display: none
						margin-left: 15px

			&.is-reply
				padding:
					left: 20px
					top: 5px
				margin-left: 35px
				box-shadow: inset 3px 0 0 $color-background-dark

				+media-xs
					padding-left: 15px

				&.comment-linked
					box-shadow: inset 3px 0 0 $color-info

				&.is-replying+.comment-reply-container
					margin-left: 35px
					padding-left: 25px

			&.is-first
				border-top: 1px solid lighten($color-text-dark-hint, 15%)

			&.is-team
				.comment-author
					color: $color-success

			&.is-replying
				box-shadow: inset 5px 0 0 $color-primary

			&.is-replying+.comment-reply-container
				box-shadow: inset 5px 0 0 $color-primary
				margin-left: 0
				padding-left: 55px

			.comment-badge
				border-radius: 3px
				border: 1px solid $color-text-dark-hint
				color: $color-text-dark-hint
				display: inline-block
				font:
					size: .7em
					weight: 400
				margin: 0 5px 0 10px
				padding: 1px 4px
				text-transform: uppercase

				&.badge-team
					border-color: $color-info
					color: $color-info
				&.badge-op
					border-color: $color-primary
					color: $color-primary
				&.badge-own
					border-color: $color-success
					color: $color-success

.comment-reply
	&-container
		background-color: $color-background

	/* Little gravatar icon on the left */
	&-avatar
		img
			border-radius: 50%
			width: 25px
			height: 25px
			box-shadow: 0 0 0 3px $color-background-light

	/* textarea field, submit button and reply details */
	&-form
		padding:
			top: 0
			left: 10px
		width: 100%

	&-field
		background-color: white
		border-radius: 3px
		box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
		display: flex
		position: relative
		transition: border-color 300ms ease-in-out

		textarea
			+node-details-description
			border-bottom-right-radius: 0
			border-top-right-radius: 0
			border: none
			box-shadow: none
			color: $color-text-dark
			flex: 1
			font:
				size: 1em
				weight: normal
			line-height: 1.5em
			margin: 0
			min-height: 45px
			padding: 10px 0 10px 10px
			resize: vertical
			transition: box-shadow 250ms ease-in-out
			width: 100%

			&:focus
				box-shadow: inset 2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success
				border: none
				color: $color-text-dark
				outline: none

				&+.comment-reply-meta button.comment-action-submit
					box-shadow: inset -2px 0 0 0 $color-success, inset 0 2px 0 0 $color-success, inset 0 -2px 0 0 $color-success

			&.error
				box-shadow: inset 2px 0 0 0 $color-danger, inset 0 2px 0 0 $color-danger, inset 0 -2px 0 0 $color-danger

		&.filled
			textarea:focus
				border-bottom-left-radius: 0

			&+.comment-reply-preview
				display: flex

			.comment-reply-meta
				background-color: $color-success

				.comment-action-submit
					color: white
					border-bottom-right-radius: 0

					span.hotkey
						display: block

		&.sign-in
			display: block
			padding: 10px
			color: $color-text-dark-primary
			cursor: default

			a
				margin-right: 4px

	&-preview
		background-color: $color-background-light
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px
		box-shadow: 1px 2px 2px rgba($color-background-dark, .5)
		color: $color-text-dark-primary
		display: none // flex when comment-reply-field has .filled class
		position: relative
		transition: all 150ms ease-in-out

		p
			padding-left: 0
			padding-right: 0

		&-md
			flex: 1
			padding: 5px 10px

		&:empty
			color: transparent
			margin: 0 auto
			padding: 0 10px
			border: none

			&:before
				content: ''
				color: transparent

	&-info
		background-color: $color-background-dark
		display: flex
		flex-direction: column
		font-size: .8em
		padding-bottom: 10px
		text-align: center
		width: 100px

	.comment-action-cancel
		cursor: pointer
		padding: 10px
		text-decoration: underline

		&:hover
			color: $color-primary

	&-meta
		display: flex
		align-items: center
		border-bottom-right-radius: 3px
		border-top-right-radius: 3px
		transition: background-color 150ms ease-in-out, color 150ms ease-in-out
		width: 100px

		button.comment-action-submit
			border: none
			border-top-left-radius: 0
			border-bottom-left-radius: 0
			color: $color-success
			flex-direction: column
			height: 100%
			position: relative
			transition: all 200ms ease-in-out
			white-space: nowrap
			width: 100%

			&:focus
				background-color: white


			&.submitting
				color: $color-info

			&.error
				background-color: $color-danger
				color: white

			span.hotkey
				color: white
				display: none
				font-weight: normal
				font-size: .9em


/* Style the comment container when we're replying */
.comment-container + .comment-reply-container
	margin-left: 30px
	padding-top: 10px

	.comment-reply-form
		.comment-reply-meta
			button.comment-action-cancel
				display: inline-block