nodebb-theme-persona/less/topic.less

.topic {
	h1 {

		line-height: 24px;
		margin-bottom: 30px;
		.topic-title {
			font-size: 28px;
			color:inherit;
		}

		> span {
			text-transform: uppercase;
			color: @gray-light;
			font-size: 12px;
			display: inline-block;
			margin-top: 8px;

			> span {
				vertical-align: middle;
				margin-right: 8px;
			}
		}

		.topic-title {
			text-transform: initial;
		}

		.browsing-users {
			margin-top: 3px;
		}
	}

	.posts {
		.icon {
			font-size: 17px;
			line-height: 17px;
			border-radius: 50%;
			min-width: 46px;
			min-height: 46px;
			margin-top: 2px;

			img {
				margin-right: 15px;
				width: 46px;
				height: 46px;
				border-radius: 50%;
			}
		}

		.group-label {
			text-transform: uppercase;
			vertical-align: 6%;
			padding: 4px;
			border-radius: 2px;
		}
	}

	.votes {
		position: absolute;
		top: 1px;
		right: 25px;
	}

	[component="post/upvote"], [component="post/downvote"] {
		color: @gray-light;
	}

	[component="post/upvote"].upvoted, [component="post/downvote"].downvoted {
		color: @brand-primary;
	}

	.stats {
		width: 60px;
		float: left;
		margin-top: -5px;
	}

	.topic-main-buttons a.btn {
		margin-left: 20px;
	}

	.title {
		p {
			margin-bottom: 4px;
		}

		small {
			margin-top: 2px;
			display: block;

			color: @gray-light;

			strong {
				color: @gray-dark;
			}
		}
	}

	.content {
		margin-top: 20px;
		padding-bottom: 1px;
		margin-top: -43px;
		margin-left: 61px;
		word-wrap: break-word;
	}

	.post-tools {
		text-transform: lowercase;
		:before {
			content: "\2022\0020";
		}
		a {
			.pointer;
		}
	}

	.moderator-tools {
		position: absolute;
		right: -5px;
		top: 0;
		font-size: 14px;

		> a {
			padding: 0.25em;
		}

		a {
			color: @gray-light;
			outline: none;

			&[role="menuitem"] {
				color: @gray-dark;
			}
		}

		// temporary until we build component toggling
		.favourite.btn-warning, .follow.btn-success {
			background: white !important;
			color: #333;
			&:hover {
				background: @brand-primary !important;
			}
		}
	}

	.tags {
		vertical-align: -40%;
	}

	h1 {
		.btn-group, .btn {
			margin-left: 15px;
		}

		.btn {
			background: @body-bg;
			text-transform: uppercase;
			font-weight: 600;
			box-shadow: none !important;
			font-size: 11px;
			color: @gray-light;
			padding: 0;
		}
	}

	.post-signature {
		font-size: 12px;
		border-top: 1px dashed #dedede;
		padding: 1px;
		padding-top: 5px;
		display: inline-block;
		font-style: italic;
	}

	@media (max-width: @screen-sm-max) {
		.content {
			margin-left: 0;
			margin-top: -10px;
		}

		.posts .icon {
			min-width: 0;
			min-height: 0;
			margin-top: 5px;

			img {
				width: 23px;
				height: 23px;
			}
		}
	}
}








.topic {
	&.deleted {
		.opacity(0.3);

		.votes {
			display: none;
		}
	}

	.posts {
		list-style-type: none;
		padding: 0;

		> li {
			position: relative;

			.status {
				vertical-align: -2%;
			}

			&.deleted {
				.content {
					.opacity(0.3);
				}

				.votes {
					display: none;
				}
			}

			> hr {
				.transition(0.75s ease-in-out border-color);
			}

			&.highlight > hr {
				border-color: darken(@brand-info, 20%);
				box-shadow: 0px 0px 1px @brand-info;
			}
		}

		.content {
			ul {
				> li {
					list-style-type: disc;

					ul > li {
						list-style-type: circle;

						ul > li {
							list-style-type: square;
						}
					}
				}

				margin-bottom: 10px;
			}

			blockquote {
				font-size: 85%;
			}

			> blockquote {
				> *:not(:first-child) {
					display: none;
				}

				> blockquote {
					display: block!important;
					> *:not(:first-child) {
						display: none;
					}
				}
			}

			> blockquote.uncollapsed {
				> *:not(:first-child) {
					display: block;
				}

				> blockquote {
					display: block!important;
					> *:not(:first-child) {
						display: block;
					}
				}
			}

			iframe, .img-responsive {
				max-width: 85%;
			}

			.toggle {
				padding: 0px 5px;
				border: 1px solid #e0e0e0;
				background: #fcfcfc;
				width: 50px;
				text-align: center;
				display:block!important;
			}

			pre {
				max-height: 350px;

				code {
					white-space: pre;
					word-wrap: normal;
				}
			}

			@media (max-width: @screen-sm-min) {
				pre {
					max-height: 250px;
				}
			}
		}
	}
}

.thread_active_users {
	text-transform: initial;

	a[data-uid] {
		position: relative;
		margin-left: 14px;

		img {
			border-radius: 50%;
			width: 20px;
			height: 20px;
			vertical-align: middle;
		}

		&::after {
			position: absolute;
			z-index: 0;
			opacity: 0;

			font-family: "FontAwesome";
			content: "\f11c";
			padding: 4px 0.25em;
			top: 0px;
			left: 0px;

			.transition(~"opacity ease 250ms, top ease 250ms")
		}

		&.replying::after {
			opacity: 1;
			top: -24px;
			.animation(topic-reply-pulse 2s ease-in infinite);
		}
	}

	.anonymous-box {
		border: 1px solid #ddd;
		width: 24px;
		height: 24px;
		position: relative;
		text-align: center;
	}
}