nodebb-theme-persona 13.3.28 → 13.3.31

package/scss/topic.scss

@@ -1,571 +1,571 @@
-.topic {
-	[component="post/header"] {
-		margin-top: 0px;
-		line-height: 40px;
-
-		.topic-title {
-			word-wrap: break-word;
-			color:inherit;
-		}
-
-		> span {
-			text-transform: uppercase;
-			color: $gray-600;
-			display: inline-block;
-			margin-top: 8px;
-		}
-
-		.topic-title {
-			text-transform: initial;
-		}
-	}
-
-	[component="topic/labels"] {
-		font-size: 20px;
-		color: $text-muted;
-	}
-
-	[component="topic/browsing-users"] {
-		margin-bottom: -5px;
-	}
-	.topic-header {
-		top: var(--panel-offset);
-		background-color: $body-bg;
-		z-index: $zindex-dropdown; // allows for top nav dropdowns to appear on top
-	}
-
-	.topic-info {
-		border-bottom: 1px solid $post-border-color;
-	}
-
-	.posts {
-		h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
-			margin-top: 0px;
-		}
-
-		.icon {
-			position: relative;
-			border-radius: 50%;
-			min-width: 46px;
-			min-height: 46px;
-			margin-top: 2px;
-
-
-			> a > .status {
-				position: absolute;
-				right: 12px;
-				font-size: 12px;
-				top: 0px;
-				z-index: 1;
-
-				@include media-breakpoint-up(md) {
-					top: 2px;
-					font-size: 16px;
-				}
-			}
-
-			.avatar {
-				margin-right: 15px;
-			}
-		}
-
-		.status {
-			vertical-align: 0%;
-		}
-	}
-
-	.login-required {
-		display: inline-block;
-		padding: 0 0.5em;
-		border: 1px dashed $gray-600;
-	}
-
-	.bookmarked {
-		font-size: 16px;
-		color: darken($post-highlight, 20%);
-		opacity: 0;
-		@include transition(0.75s ease-in-out opacity);
-		margin-left: 5px;
-	}
-
-	[component="post/anchor"] {
-		position: relative;
-		top: -$post-padding;
-	}
-
-	[component="post/upvote"], [component="post/downvote"] {
-		display: inline-block;
-		padding: 1rem;
-		color: $text-muted;
-
-		&:focus {
-				text-decoration: none;
-		}
-	}
-
-	[component="post/upvote"].upvoted i {
-		@include fa-icon-solid($fa-var-circle-chevron-up);
-		color: $primary;
-	}
-
-	[component="post/downvote"].downvoted i {
-		@include fa-icon-solid($fa-var-circle-chevron-down);
-		color: $primary;
-	}
-
-	[component="post/vote-count"] {
-		display: inline-block;
-		padding: 1rem 0.5rem;
-	}
-
-	[component="post/parent"] {
-		border: 0;
-		font-size: 10px;
-	}
-
-	.threaded-replies {
-		margin-left: 60px;
-		padding: 1rem 0px;
-		text-decoration: none;
-
-		img, .user-icon {
-			@include user-icon-style(16px, 10px, 50%);
-			vertical-align: 1px;
-		}
-
-		img {
-			vertical-align: -4px;
-		}
-
-		.replies-count {
-			margin-left: 3px;
-		}
-
-		.fa {
-			font-size: 80%;
-		}
-
-		.avatars {
-			position: relative;
-		}
-	}
-
-	[component="post/replies"] {
-		margin-left: 61px;
-		margin-top: $post-padding;
-		border-left: 5px solid #eee;
-		padding-left: 20px;
-		.timeline-event { display: none; }
-		[component="post"]:last-child > hr {
-			display: none;
-		}
-	}
-
-	.stats {
-		font-size: 12px;
-		margin: 0px 2px 0px 2px;
-		display: inline-block;
-	}
-
-	.title {
-		p {
-			margin-bottom: 4px;
-		}
-
-		small {
-			margin-top: 2px;
-			display: block;
-
-			color: $gray-600;
-
-			strong {
-				color: $gray-800;
-			}
-		}
-	}
-
-	.content {
-		margin-top: $post-padding;
-		padding-bottom: 1px;
-		margin-top: -43px;
-		margin-left: 38px;
-		word-wrap: break-word;
-		overflow: hidden;
-		min-height: 60px;
-	}
-
-	.post-tools {
-		a {
-			padding: 1rem 10px;
-			@include pointer;
-		}
-	}
-
-	[component="post/tools"] {
-		font-size: 14px;
-
-		> a {
-			padding: 1rem;
-		}
-
-		// temporary until we build component toggling
-		.favourite.btn-warning, .follow.btn-success {
-			background: white !important;
-			color: #333;
-			&:hover {
-				background: $primary !important;
-			}
-		}
-	}
-
-	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-600;
-			padding: 0;
-		}
-	}
-
-	.post-signature {
-		font-size: 12px;
-		border-top: 1px dashed #dedede;
-		padding: 1px;
-		padding-top: 5px;
-		display: block;
-		font-style: italic;
-		margin-left: 61px;
-		max-width: 100%;
-		word-wrap: break-word;
-	}
-
-	@include media-breakpoint-down(sm) {
-		.content {
-			margin-left: 0;
-			margin-top: -10px;
-
-			.table {
-				overflow-x: auto;
-				display: block;
-			}
-		}
-
-		.post-signature {
-			margin-left: 0px;
-		}
-
-		.posts .icon {
-			min-width: 0;
-			min-height: 0;
-			margin-top: 0px;
-
-			.avatar {
-				@include user-icon-style(23px, calc(23px * 0.6), 50%);
-			}
-		}
-
-		[component="post/reply-count"] {
-			margin-left: 0;
-		}
-
-		[component="post/replies"] {
-			margin-left: 1px;
-		}
-	}
-
-	.quick-reply {
-		position: relative;
-		.icon {
-			position: relative;
-			border-radius: 50%;
-			min-width: 46px;
-			min-height: 46px;
-			margin-top: 2px;
-
-			> a > .status {
-				position: absolute;
-				right: 12px;
-				font-size: 12px;
-				top: 0px;
-
-				@include media-breakpoint-up(md) {
-					top: 2px;
-					font-size: 16px;
-				}
-			}
-
-			.avatar {
-				margin-right: 15px;
-			}
-		}
-
-		.quickreply-message {
-			margin-left: 63px;
-			margin-bottom: 5px;
-
-			@include media-breakpoint-down(sm) {
-				margin-left: 0;
-
-				[component="topic/quickreply/text"] {
-					font-size: 16px;
-					padding: 10px;
-				}
-			}
-		}
-	}
-}
-
-
-.topic {
-	&.deleted {
-		opacity: 0.3;
-
-		.votes {
-			display: none;
-		}
-	}
-
-	.posts {
-		&.timeline {
-			@include timeline-style;
-		}
-
-		list-style-type: none;
-		padding: 0;
-
-		[component="post"] {
-			position: relative;
-			@include transition(0.75s ease-in-out border-color);
-
-			.edit-icon {
-				vertical-align: -2%;
-			}
-
-			&.deleted {
-				> .content {
-					opacity: 0.3;
-				}
-
-				.votes {
-					display: none;
-				}
-			}
-
-			&.highlight {
-				border-color: darken($post-highlight, 20%);
-				box-shadow: 0px 2px 2px -2px $post-highlight;
-
-				.bookmarked {
-					opacity: 1;
-				}
-			}
-		}
-
-		.content {
-			@include fix-lists;
-
-			> blockquote {
-				> blockquote {
-					> *:not(.blockquote) {
-						display: none;
-					}
-				}
-
-				> blockquote.uncollapsed {
-					> *:not(.blockquote) {
-							display: block;
-					}
-				}
-			}
-
-			iframe, .img-fluid {
-				max-width: 85%;
-				display: inline;
-			}
-
-			pre {
-				max-height: 350px;
-
-				code {
-					white-space: pre;
-					word-wrap: normal;
-					min-width: 100%;
-				}
-			}
-
-			@include media-breakpoint-down(sm) {
-				pre {
-					max-height: 250px;
-				}
-			}
-		}
-	}
-
-	.pagination-block {
-		position: fixed;
-		bottom: 0px;
-		right: 0px;
-		z-index: 100;
-		transition: opacity 250ms ease-in;
-		opacity: 0;
-
-		.pagination-text {
-			position: relative;
-    		top: -3px;
-    		font-weight: bolder;
-		}
-
-		&.ready {
-			opacity: 1;
-		}
-
-		.wrapper {
-			padding: 5px 0px 5px 0px;
-			.dropdown-toggle {
-				padding-left: 20px;
-				padding-right: 20px;
-				padding-top: 10px;
-			}
-			.dropdown-menu {
-				width: 475px;
-
-				li {
-					padding: 15px;
-				}
-				.post-content {
-					height: 350px;
-					overflow: hidden;
-				}
-				.scroller-container {
-					height: 300px;
-					border-right: 3px solid $gray-200;
-					margin-right: 3px;
-					cursor: pointer;
-					.scroller-thumb {
-						height: 40px;
-						position: relative;
-						right: -6px;
-						padding-right: 15px;
-    					margin-right: -15px;
-
-
-						.scroller-thumb-icon {
-							width: 9px;
-							height: 40px;
-							background-color: $primary;
-							position: relative;
-							display: inline-block;
-							border-radius: 3px;
-						}
-						.thumb-text {
-							font-weight: bolder;
-							user-select: none;
-							position: relative;
-							top: -15px;
-							padding-right: 10px;
-						}
-					}
-				}
-			}
-			@include media-breakpoint-down(sm) {
-				.dropdown-menu {
-					width: 100%;
-				}
-			}
-		}
-		.progress-bar {
-			display:block;
-			z-index: -1;
-			position: absolute;
-			transition: width 50ms ease-in;
-			height: 100%;
-		}
-	}
-	@include media-breakpoint-down(sm) {
-		.pagination-block {
-			width: 100%;
-		}
-	}
-}
-
-.thread_active_users {
-	text-transform: initial;
-
-	a[data-uid] {
-		position: relative;
-
-		img, .user-icon {
-			@include user-icon-style(20px, 1rem, 50%);
-			vertical-align: middle;
-			margin: 0 7px;
-		}
-
-		&::after {
-			position: absolute;
-			z-index: 0;
-			opacity: 0;
-
-			font-family: "FontAwesome";
-			content: "\f11c";
-			padding: 4px 0.25em;
-			top: -36px;
-			left: 7px;
-
-			@include transition("opacity ease 250ms, top ease 250ms")
-		}
-
-		&.replying::after {
-			opacity: 1;
-			top: -50px;
-			animation: topic-reply-pulse 2s ease-in infinite;
-		}
-	}
-
-	.anonymous-box {
-		border: 1px solid #ddd;
-		width: 24px;
-		height: 24px;
-		position: relative;
-		text-align: center;
-	}
-}
-
-[component="post"] {
-	>.post-header [component="user/picture"], >.post-header [component="user/status"] {
-		opacity: 1;
-	}
-
-	>.post-header .icon:before {
-		opacity: 0;
-	}
-
-	&.selected {
-		background-color: initial;
-
-		>.post-header .icon:before {
-			border: 1px solid $success;
-    		color: $white;
-			background-color: $success;
-    		-webkit-transition: .2s ease-in-out all;
-    		transition: .2s ease-in-out all;
-			content: fa-content($fa-var-check);
-    		padding: 14px;
-		    border-radius: 50%;
-		    opacity: 1;
-		    position: absolute;
-		    display: inline-block;
-		    font: normal normal normal 14px/1 FontAwesome;
-		}
-
-		>.post-header [component="user/picture"], >.post-header [component="user/status"] {
-			opacity: 0;
-		}
-	}
-}
+.topic {
+	[component="post/header"] {
+		margin-top: 0px;
+		line-height: 40px;
+
+		.topic-title {
+			word-wrap: break-word;
+			color:inherit;
+		}
+
+		> span {
+			text-transform: uppercase;
+			color: $gray-600;
+			display: inline-block;
+			margin-top: 8px;
+		}
+
+		.topic-title {
+			text-transform: initial;
+		}
+	}
+
+	[component="topic/labels"] {
+		font-size: 20px;
+		color: $text-muted;
+	}
+
+	[component="topic/browsing-users"] {
+		margin-bottom: -5px;
+	}
+	.topic-header {
+		top: var(--panel-offset);
+		background-color: $body-bg;
+		z-index: $zindex-dropdown; // allows for top nav dropdowns to appear on top
+	}
+
+	.topic-info {
+		border-bottom: 1px solid $post-border-color;
+	}
+
+	.posts {
+		h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
+			margin-top: 0px;
+		}
+
+		.icon {
+			position: relative;
+			border-radius: 50%;
+			min-width: 46px;
+			min-height: 46px;
+			margin-top: 2px;
+
+
+			> a > .status {
+				position: absolute;
+				right: 12px;
+				font-size: 12px;
+				top: 0px;
+				z-index: 1;
+
+				@include media-breakpoint-up(md) {
+					top: 2px;
+					font-size: 16px;
+				}
+			}
+
+			.avatar {
+				margin-right: 15px;
+			}
+		}
+
+		.status {
+			vertical-align: 0%;
+		}
+	}
+
+	.login-required {
+		display: inline-block;
+		padding: 0 0.5em;
+		border: 1px dashed $gray-600;
+	}
+
+	.bookmarked {
+		font-size: 16px;
+		color: darken($post-highlight, 20%);
+		opacity: 0;
+		@include transition(0.75s ease-in-out opacity);
+		margin-left: 5px;
+	}
+
+	[component="post/anchor"] {
+		position: relative;
+		top: -$post-padding;
+	}
+
+	[component="post/upvote"], [component="post/downvote"] {
+		display: inline-block;
+		padding: 1rem;
+		color: $text-muted;
+
+		&:focus {
+				text-decoration: none;
+		}
+	}
+
+	[component="post/upvote"].upvoted i {
+		@include fa-icon-solid($fa-var-circle-chevron-up);
+		color: $primary;
+	}
+
+	[component="post/downvote"].downvoted i {
+		@include fa-icon-solid($fa-var-circle-chevron-down);
+		color: $primary;
+	}
+
+	[component="post/vote-count"] {
+		display: inline-block;
+		padding: 1rem 0.5rem;
+	}
+
+	[component="post/parent"] {
+		border: 0;
+		font-size: 10px;
+	}
+
+	.threaded-replies {
+		margin-left: 60px;
+		padding: 1rem 0px;
+		text-decoration: none;
+
+		img, .user-icon {
+			@include user-icon-style(16px, 10px, 50%);
+			vertical-align: 1px;
+		}
+
+		img {
+			vertical-align: -4px;
+		}
+
+		.replies-count {
+			margin-left: 3px;
+		}
+
+		.fa {
+			font-size: 80%;
+		}
+
+		.avatars {
+			position: relative;
+		}
+	}
+
+	[component="post/replies"] {
+		margin-left: 61px;
+		margin-top: $post-padding;
+		border-left: 5px solid #eee;
+		padding-left: 20px;
+		.timeline-event { display: none; }
+		[component="post"]:last-child > hr {
+			display: none;
+		}
+	}
+
+	.stats {
+		font-size: 12px;
+		margin: 0px 2px 0px 2px;
+		display: inline-block;
+	}
+
+	.title {
+		p {
+			margin-bottom: 4px;
+		}
+
+		small {
+			margin-top: 2px;
+			display: block;
+
+			color: $gray-600;
+
+			strong {
+				color: $gray-800;
+			}
+		}
+	}
+
+	.content {
+		margin-top: $post-padding;
+		padding-bottom: 1px;
+		margin-top: -43px;
+		margin-left: 38px;
+		word-wrap: break-word;
+		overflow: hidden;
+		min-height: 60px;
+	}
+
+	.post-tools {
+		a {
+			padding: 1rem 10px;
+			@include pointer;
+		}
+	}
+
+	[component="post/tools"] {
+		font-size: 14px;
+
+		> a {
+			padding: 1rem;
+		}
+
+		// temporary until we build component toggling
+		.favourite.btn-warning, .follow.btn-success {
+			background: white !important;
+			color: #333;
+			&:hover {
+				background: $primary !important;
+			}
+		}
+	}
+
+	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-600;
+			padding: 0;
+		}
+	}
+
+	.post-signature {
+		font-size: 12px;
+		border-top: 1px dashed #dedede;
+		padding: 1px;
+		padding-top: 5px;
+		display: block;
+		font-style: italic;
+		margin-left: 61px;
+		max-width: 100%;
+		word-wrap: break-word;
+	}
+
+	@include media-breakpoint-down(sm) {
+		.content {
+			margin-left: 0;
+			margin-top: -10px;
+
+			.table {
+				overflow-x: auto;
+				display: block;
+			}
+		}
+
+		.post-signature {
+			margin-left: 0px;
+		}
+
+		.posts .icon {
+			min-width: 0;
+			min-height: 0;
+			margin-top: 0px;
+
+			.avatar {
+				@include user-icon-style(23px, calc(23px * 0.6), 50%);
+			}
+		}
+
+		[component="post/reply-count"] {
+			margin-left: 0;
+		}
+
+		[component="post/replies"] {
+			margin-left: 1px;
+		}
+	}
+
+	.quick-reply {
+		position: relative;
+		.icon {
+			position: relative;
+			border-radius: 50%;
+			min-width: 46px;
+			min-height: 46px;
+			margin-top: 2px;
+
+			> a > .status {
+				position: absolute;
+				right: 12px;
+				font-size: 12px;
+				top: 0px;
+
+				@include media-breakpoint-up(md) {
+					top: 2px;
+					font-size: 16px;
+				}
+			}
+
+			.avatar {
+				margin-right: 15px;
+			}
+		}
+
+		.quickreply-message {
+			margin-left: 63px;
+			margin-bottom: 5px;
+
+			@include media-breakpoint-down(sm) {
+				margin-left: 0;
+
+				[component="topic/quickreply/text"] {
+					font-size: 16px;
+					padding: 10px;
+				}
+			}
+		}
+	}
+}
+
+
+.topic {
+	&.deleted {
+		opacity: 0.3;
+
+		.votes {
+			display: none;
+		}
+	}
+
+	.posts {
+		&.timeline {
+			@include timeline-style;
+		}
+
+		list-style-type: none;
+		padding: 0;
+
+		[component="post"] {
+			position: relative;
+			@include transition(0.75s ease-in-out border-color);
+
+			.edit-icon {
+				vertical-align: -2%;
+			}
+
+			&.deleted {
+				> .content {
+					opacity: 0.3;
+				}
+
+				.votes {
+					display: none;
+				}
+			}
+
+			&.highlight {
+				border-color: darken($post-highlight, 20%);
+				box-shadow: 0px 2px 2px -2px $post-highlight;
+
+				.bookmarked {
+					opacity: 1;
+				}
+			}
+		}
+
+		.content {
+			@include fix-lists;
+
+			> blockquote {
+				> blockquote {
+					> *:not(.blockquote) {
+						display: none;
+					}
+				}
+
+				> blockquote.uncollapsed {
+					> *:not(.blockquote) {
+							display: block;
+					}
+				}
+			}
+
+			iframe, .img-fluid {
+				max-width: 85%;
+				display: inline;
+			}
+
+			pre {
+				max-height: 350px;
+
+				code {
+					white-space: pre;
+					word-wrap: normal;
+					min-width: 100%;
+				}
+			}
+
+			@include media-breakpoint-down(sm) {
+				pre {
+					max-height: 250px;
+				}
+			}
+		}
+	}
+
+	.pagination-block {
+		position: fixed;
+		bottom: 0px;
+		right: 0px;
+		z-index: 100;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+
+		.pagination-text {
+			position: relative;
+    		top: -3px;
+    		font-weight: bolder;
+		}
+
+		&.ready {
+			opacity: 1;
+		}
+
+		.wrapper {
+			padding: 5px 0px 5px 0px;
+			.dropdown-toggle {
+				padding-left: 20px;
+				padding-right: 20px;
+				padding-top: 10px;
+			}
+			.dropdown-menu {
+				width: 475px;
+
+				li {
+					padding: 15px;
+				}
+				.post-content {
+					height: 350px;
+					overflow: hidden;
+				}
+				.scroller-container {
+					height: 300px;
+					border-right: 3px solid $gray-200;
+					margin-right: 3px;
+					cursor: pointer;
+					.scroller-thumb {
+						height: 40px;
+						position: relative;
+						right: -6px;
+						padding-right: 15px;
+    					margin-right: -15px;
+
+
+						.scroller-thumb-icon {
+							width: 9px;
+							height: 40px;
+							background-color: $primary;
+							position: relative;
+							display: inline-block;
+							border-radius: 3px;
+						}
+						.thumb-text {
+							font-weight: bolder;
+							user-select: none;
+							position: relative;
+							top: -15px;
+							padding-right: 10px;
+						}
+					}
+				}
+			}
+			@include media-breakpoint-down(sm) {
+				.dropdown-menu {
+					width: 100%;
+				}
+			}
+		}
+		.progress-bar {
+			display:block;
+			z-index: -1;
+			position: absolute;
+			transition: width 50ms ease-in;
+			height: 100%;
+		}
+	}
+	@include media-breakpoint-down(sm) {
+		.pagination-block {
+			width: 100%;
+		}
+	}
+}
+
+.thread_active_users {
+	text-transform: initial;
+
+	a[data-uid] {
+		position: relative;
+
+		img, .user-icon {
+			@include user-icon-style(20px, 1rem, 50%);
+			vertical-align: middle;
+			margin: 0 7px;
+		}
+
+		&::after {
+			position: absolute;
+			z-index: 0;
+			opacity: 0;
+
+			font-family: "FontAwesome";
+			content: "\f11c";
+			padding: 4px 0.25em;
+			top: -36px;
+			left: 7px;
+
+			@include transition("opacity ease 250ms, top ease 250ms")
+		}
+
+		&.replying::after {
+			opacity: 1;
+			top: -50px;
+			animation: topic-reply-pulse 2s ease-in infinite;
+		}
+	}
+
+	.anonymous-box {
+		border: 1px solid #ddd;
+		width: 24px;
+		height: 24px;
+		position: relative;
+		text-align: center;
+	}
+}
+
+[component="post"] {
+	>.post-header [component="user/picture"], >.post-header [component="user/status"] {
+		opacity: 1;
+	}
+
+	>.post-header .icon:before {
+		opacity: 0;
+	}
+
+	&.selected {
+		background-color: initial;
+
+		>.post-header .icon:before {
+			border: 1px solid $success;
+    		color: $white;
+			background-color: $success;
+    		-webkit-transition: .2s ease-in-out all;
+    		transition: .2s ease-in-out all;
+			content: fa-content($fa-var-check);
+    		padding: 14px;
+		    border-radius: 50%;
+		    opacity: 1;
+		    position: absolute;
+		    display: inline-block;
+		    font: normal normal normal 14px/1 FontAwesome;
+		}
+
+		>.post-header [component="user/picture"], >.post-header [component="user/status"] {
+			opacity: 0;
+		}
+	}
+}