artabro/wire/modules/Process/ProcessCommentsManager/ProcessCommentsManager.scss

#CommentListHeader {
	padding-top: 0.5em;
	padding-bottom: 0.5em;

	& > p {
		line-height: 2.25em;
		padding-right: 1em;
		margin-top: 0.25em;
		margin-bottom: 0.25em;
	}
	.MarkupPagerNav {
		margin-top: 0;
		margin-bottom: 0.5em;
	}

	.CommentLimitSelect {
		float: left;
	}

	.CommentCheckAll {
		display: block;
		float: left;
		padding-left: 0.75em;
	}

	.CommentActions {
		float: left;
	}

	.CommentSorts {
		float: left;
	}
}

.CommentItems {
	clear: both;
	border-bottom: 1px solid #777; 
	
	& + button.ui-button {
		margin-top: 1em;
	}
}

.CommentItem {
	clear: both;
	border-top: 1px solid #777;
	padding: 0.75em 0;
	margin: 0;
	width: 100%;
	
	&.CommentChecked {
		background-color: #eee;
		th {
			color: #999;
		}
	}

	table {
		/*
		margin-top: 0.7em;
		margin-bottom: 0.7em;
		*/
		width: 45%;
		float: left;
		
		th,
		td {
			padding: 4px 10px 4px 0;
			border-bottom: 1px solid #ddd;
			vertical-align: top;
			line-height: 1.8;
		}
		
		th {
			font-weight: bold;
			white-space: nowrap;
			text-align: left;
			padding-left: 0.75em !important;
			
			&:first-child {
				width: 80px;
			}
		}
		
		tr:last-child {
			td, th {
				border-bottom: none;
			}
		}
		
	}
	
	.CommentTitle th,
	.CommentTitle td {
		padding-top: 0;
	}
	
	.CommentInput {
		max-width: 80%;
	}
	
	
	.CommentChangedIcon {
		display: none;
	}
	
	&.CommentItemChanged .CommentChangedIcon {
		display: inline;
		float: right;
		opacity: 0.3;
	}
	
	input[type=number] {
		width: 4em;
	}
	
	.CommentVotes {
		label {
			margin-right: 5px;
		}
		.CommentUpvotes span {
			font-weight: bold;
			color: green;
			margin-right: 2px;
		}
		.CommentDownvotes span {
			font-weight: bold;
			color: red;
			margin-right: 2px;
		}
	}
	
	.CommentID {
		font-weight: normal;
		color: #333;
	}
	
	.CommentWhere {
		small {
			margin-right: 2px;
		}
		input {
			width: 80px;
		}
	}

	.CommentContent {
		float: left;
		width: 55%;
		padding-left: 1em;
		border: none;
		
		.CommentChildrenInfo {
			margin-top: 0.5em;
		}
		.CommentReplyInfo {
			margin-bottom: 0;
		}
		
		.CommentText {
			cursor: pointer;
			padding-right: 1em;

			textarea {
				font-size: 1em;
				width: 100%;
				min-height: 18em;
				margin-top: 1em;
				margin-bottom: 1em;
			}
			.CommentTextEdit {
				white-space: nowrap;
			}
			.CommentTextEditable {
				/*
				p {
					margin: 1em 0;
				}
				& > p:first-child {
					margin-top: 0;
				}
				*/
			}
		}

		.CommentTextOverflow {
			overflow-y: scroll;
			max-height: 18em;
		}
		&.CommentContentLarge .CommentTextOverflow {
			max-height: 24em;
		}

	}
	
	label.CommentStatus {
		white-space: nowrap;
		display: inline-block;
	}

	select.CommentStatus {
		width: auto;
		&.uk-select {
			padding-right: 30px;
		}
	}

	&.CommentItemStatus999 {
		display: none;
	}

	/*
	&.CommentItemStatus-2 .CommentText {
		background: #ffffcc;
	}

	&.CommentItemStatus0 .CommentText {
		background: #ffffdd;
	}
	*/
}


.CommentCheckAll label .detail, 
.CommentItem .CommentTitle th label .detail {
	font-weight: bold;
	color: #444;
}

.pw-content .MarkupPagerNav {
	padding-top: 0.5em;
	float: right; 
	
	& + button {
		margin-top: 1em;
	}
}

.AdminThemeReno .pw-content {
	.MarkupPagerNav {
		// AdminThemeReno pagination looks incorrect here with the "on" item having extra borders
		// so this bit of code corrects it. @todo resolve this within AdminThemeReno rather than here
		li a,
		li:first-child a,
		li.MarkupPagerNavOn a {
			border-color: #fff !important;
			border: none !important;
			border-left: 1px solid #fff !important;
		}
		li {
			margin-bottom: 1px; 
		}
	}
	#CommentListHeader {
		border-top: 1px solid #eee;
		.MarkupPagerNav {
			margin-top: 0.5em;
		}
	}
}

@media only screen and (max-width: 960px) {
	
	.pw-content .MarkupPagerNav {
		float: none;
	}
	
	#CommentListHeader {
		padding-bottom: 1em;
		padding-top: 1em;
		.MarkupPagerNav {
			float: none;
		}
		p {
			margin-top: 0;
			margin-bottom: 0;
			padding-right: 1em;
			padding-left: 0 !important;
		}
		.CommentCheckAll {
			//clear: both;
			width: auto;
		}
	}
	
}

@media only screen and (max-width: 768px) {
	.CommentItem {
		table {
			width: 100%;
			float: none;
			th {
				padding-left: 0 !important;
			}
		}
		.CommentContent {
			width: 100%;
			float: none;
			padding-left: 0;
			
			.CommentText {
				padding-right: 0;
			}
			
			.CommentTextOverflow {
				overflow-y: auto;
				max-height: inherit;
			}
		}
		
	}

}

.CommentItem,
.InputfieldForm {
	.CommentStars {
		& > span {
			display: inline;
			cursor: pointer;
			padding-right: 3px;

			i.fa {
				font-size: 18px !important;
			}
		}
	}
}


.WireTabs {
	opacity: 0;
}

blockquote {
	padding-left: 30px;
	border-left: 3px solid #ccc;
	color: #777;
}