nodebb-theme-persona/less/mixins.less

.no-select {
	.user-select(none);
}

.pointer {
	cursor: pointer;
	*cursor: hand;
}

.inline-block {
	display: inline-block;
	*display: inline;
	zoom: 1;
}

.clear {
	clear: both;
}

.zebra {
	&:nth-child(even) {
		background: rgba(191,191,191,0.2);
	}

	&:nth-child(odd) {
		background: rgba(223,223,223,0.2);
	}
}

.opacity(@opacity: 1) {
	-moz-opacity: @opacity;
	opacity: @opacity;
	-ms-filter: ~`"progid:DXImageTransform.Microsoft.Alpha(opacity=(" + "@{opacity}" * 100 + "))"`;
	filter: ~`"alpha(opacity = (" + "@{opacity}" * 100 + "))"`;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	-ms-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}

.text-ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.timeline-style {
	> [component="post"], .timeline-event {
		position: relative;	// for absolutely positioned pseudo-element, below
		border-left: 2px solid lighten(@brand-primary, 30%);
		margin-left: 2.5rem;

		&:not(:last-child) {
			padding-bottom: @post-padding;
		}
		&:not(:first-child) {
			padding-top: @post-padding;
		}

		> div:not(.content) {
			margin-left: -2.5rem;
		}

		.avatar, .timeline-badge {
			// Opaque ring
			position: relative;
			z-index: 1;
			box-shadow: 0 0 0 .5rem @body-bg;
		}
	}

	@media (max-width: @screen-sm-max) {
		[component="post"] {
			border: 0;
			padding: @post-padding 0;

			margin-left: initial;
			> div:not(.content) {
				margin-left: 0;
			}
		}

		[component="post"]:last-child:after {
			display: none;
		}

		.timeline-event {
			margin-left: 1rem;

			&:before, &+:not(.timeline-event):before {
				content: '';
				width: 1rem;
				position: absolute;
				top: 0;
				left: calc(-0.5rem - 1px);
				border-bottom: 2px solid lighten(@brand-primary, 30%);
			}

			&+:not(.timeline-event):before {
				left: calc(.5rem + 1px);
			}

			&+.timeline-event:before {
				display: none;
			}
		}
	}

	@media (min-width: @screen-sm) {
		.timeline-event {
			[component="topic/event/delete"] {
				visibility: hidden;
			}

			&:hover {
				[component="topic/event/delete"] {
					visibility: visible;

					&:hover {
						color: @brand-danger;
					}
				}
			}
		}
	}

	.necro-post {
		border-left-style: dashed;
	}

	[component="post"]:last-child:after {
		content: '';
		width: 1rem;
		position: absolute;
		bottom: 0;
		left: calc(-0.5rem - 1px);
		border-bottom: 2px solid lighten(@brand-primary, 30%);
	}

	[component="topic/event"], [component="topic/necro-post"] {
		&.timeline-event {
			text-align: left;
			justify-content: left;
			font-size: 1em;

			.timeline-badge {
				float: left;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 32px;
				height: 32px;
				padding: 0;
				margin-left: -17px;
				margin-right: 17px;
				color: lighten(@brand-primary, 30%);
				background-color: @body-bg;
				border: 2px solid lighten(@brand-primary, 30%);
				border-radius: 50%;
			}

			.timeline-text {
				line-height: 32px;
				text-transform: initial;
				color: rgba(127,127,127,.5);
			}
		}
	}
}