nodebb-theme-persona 12.1.5 → 13.0.0

package/{less/topic.less → scss/topic.scss}

@@ -12,7 +12,7 @@
 			font-size: 24px;
 			color:inherit;
 			line-height: 32px;
-			@media (max-width: @screen-sm-max) {
+			@include media-breakpoint-down(sm) {
 				font-size: 18px;
 				line-height: 24px;
 				margin-top: 0px;
@@ -21,7 +21,7 @@
 
 		> span {
 			text-transform: uppercase;
-			color: @gray-light;
+			color: $gray-600;
 			display: inline-block;
 			margin-top: 8px;
 		}
@@ -33,42 +33,26 @@
 
 	[component="topic/labels"] {
 		font-size: 20px;
-		color: @text-muted;
+		color: $text-muted;
 	}
 
 	[component="topic/browsing-users"] {
 		margin-bottom: -5px;
 	}
 	.topic-header {
-		position: sticky;
-		top: calc(var(--panel-offset) - 20px);
-		background-color: @body-bg;
-		z-index: @zindex-navbar;
-		margin-left: -15px;
-		margin-right: -15px;
-		padding-left: 15px;
-		padding-right: 15px;
+		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;
+		border-bottom: 1px solid $post-border-color;
 		margin-bottom: 10px;
 		padding-bottom: 10px;
 		> * {
 			padding-top: 10px;
 		}
 	}
-	.category-item {
-		.icon {
-			min-width: 23px;
-    		min-height: 23px;
-    		font-size: 10px;
-    		line-height: 12px;
-    		padding: 5px;
-			margin-right: 5px;
-			border-radius: 50%;
-		}
-	}
 
 	.posts {
 		h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
@@ -118,7 +102,7 @@
 				top: 0px;
 				z-index: 1;
 
-				@media (min-width: @screen-md-min) {
+				@include media-breakpoint-up(md) {
 					top: 2px;
 					font-size: 16px;
 				}
@@ -137,24 +121,23 @@
 	.login-required {
 		display: inline-block;
 		padding: 0 0.5em;
-		border: 1px dashed @gray-light;
+		border: 1px dashed $gray-600;
 	}
 
 	.bookmarked {
 		font-size: 16px;
-		color: darken(@post-highlight, 20%);
+		color: darken($post-highlight, 20%);
 		opacity: 0;
-		.transition(0.75s ease-in-out opacity);
+		@include transition(0.75s ease-in-out opacity);
 		margin-left: 5px;
 	}
 
 	[component="post/anchor"] {
 		position: relative;
-		top: -@post-padding;
+		top: -$post-padding;
 	}
 
 	[component="post/upvote"], [component="post/downvote"] {
-		color: @gray-light;
 		display: inline-block;
 		padding: 1rem;
 
@@ -165,12 +148,12 @@
 
 	[component="post/upvote"].upvoted {
 		border-radius: 3px;
-		border: 1px solid @brand-success;
+		border: 1px solid $success;
 	}
 
 	[component="post/downvote"].downvoted {
 		border-radius: 3px;
-		border: 1px solid @brand-warning;
+		border: 1px solid $warning;
 	}
 
 	[component="post/vote-count"] {
@@ -190,7 +173,7 @@
 		font-size: 11px;
 
 		img, .user-icon {
-			.user-icon-style(16px, 10px, 50%);
+			@include user-icon-style(16px, 10px, 50%);
 			vertical-align: 1px;
 		}
 
@@ -202,10 +185,6 @@
 			margin-left: 3px;
 		}
 
-		.replies-last {
-			color: @gray-light;
-		}
-
 		.fa {
 			font-size: 80%;
 		}
@@ -233,7 +212,7 @@
 
 	[component="post/replies"] {
 		margin-left: 61px;
-		margin-top: @post-padding;
+		margin-top: $post-padding;
 		border-left: 5px solid #eee;
 		padding-left: 20px;
 
@@ -257,16 +236,16 @@
 			margin-top: 2px;
 			display: block;
 
-			color: @gray-light;
+			color: $gray-600;
 
 			strong {
-				color: @gray-dark;
+				color: $gray-800;
 			}
 		}
 	}
 
 	.content {
-		margin-top: @post-padding;
+		margin-top: $post-padding;
 		padding-bottom: 1px;
 		margin-top: -43px;
 		margin-left: 38px;
@@ -278,7 +257,7 @@
 	.post-tools {
 		a {
 			padding: 1rem 10px;
-			.pointer;
+			@include pointer;
 		}
 	}
 
@@ -295,7 +274,7 @@
 			background: white !important;
 			color: #333;
 			&:hover {
-				background: @brand-primary !important;
+				background: $primary !important;
 			}
 		}
 	}
@@ -306,12 +285,12 @@
 		}
 
 		.btn {
-			background: @body-bg;
+			background: $body-bg;
 			text-transform: uppercase;
 			font-weight: 600;
 			box-shadow: none !important;
 			font-size: 11px;
-			color: @gray-light;
+			color: $gray-600;
 			padding: 0;
 		}
 	}
@@ -328,7 +307,7 @@
 		word-wrap: break-word;
 	}
 
-	@media (max-width: @screen-sm-max) {
+	@include media-breakpoint-down(sm) {
 		.content {
 			margin-left: 0;
 			margin-top: -10px;
@@ -349,7 +328,7 @@
 			margin-top: -3px;
 
 			.avatar {
-				.user-icon-style(23px, 1.3rem, 50%);
+				@include user-icon-style(23px, calc(23px * 0.6), 50%);
 			}
 		}
 
@@ -377,7 +356,7 @@
 				font-size: 12px;
 				top: 0px;
 
-				@media (min-width: @screen-md-min) {
+				@include media-breakpoint-up(md) {
 					top: 2px;
 					font-size: 16px;
 				}
@@ -389,10 +368,10 @@
 		}
 
 		.quickreply-message {
-			margin-left: 61px;
+			margin-left: 63px;
 			margin-bottom: 5px;
 
-			@media (max-width: @screen-sm-max) {
+			@include media-breakpoint-down(sm) {
 				margin-left: 0;
 
 				[component="topic/quickreply/text"] {
@@ -420,7 +399,7 @@
 
 	.posts {
 		&.timeline {
-			.timeline-style;
+			@include timeline-style;
 		}
 
 		list-style-type: none;
@@ -428,7 +407,7 @@
 
 		[component="post"] {
 			position: relative;
-			.transition(0.75s ease-in-out border-color);
+			@include transition(0.75s ease-in-out border-color);
 
 			.edit-icon {
 				vertical-align: -2%;
@@ -445,8 +424,8 @@
 			}
 
 			&.highlight {
-				border-color: darken(@post-highlight, 20%);
-				box-shadow: 0px 2px 2px -2px @post-highlight;
+				border-color: darken($post-highlight, 20%);
+				box-shadow: 0px 2px 2px -2px $post-highlight;
 
 				.bookmarked {
 					opacity: 1;
@@ -455,7 +434,7 @@
 		}
 
 		.content {
-			.fix-lists;
+			@include fix-lists;
 
 			blockquote {
 				font-size: 12px;
@@ -475,7 +454,7 @@
 				}
 			}
 
-			iframe, .img-responsive {
+			iframe, .img-fluid {
 				max-width: 85%;
 				display: inline;
 			}
@@ -499,7 +478,7 @@
 				}
 			}
 
-			@media (max-width: @screen-sm-min) {
+			@include media-breakpoint-down(sm) {
 				pre {
 					max-height: 250px;
 				}
@@ -509,7 +488,7 @@
 
 	.pagination-block {
 		position: fixed;
-		background-color: @gray-lighter;
+		background-color: $gray-200;
 		bottom: 0px;
 		right: 0px;
 		z-index: 100;
@@ -517,7 +496,7 @@
 		opacity: 0;
 
 		.pagination-text {
-			color: @text-color;
+			color: $text-muted;
 			position: relative;
     		top: -3px;
     		font-weight: bolder;
@@ -533,7 +512,6 @@
 				padding-left: 20px;
 				padding-right: 20px;
 				padding-top: 10px;
-				padding-bottom: 10px;
 			}
 			.dropdown-menu {
 				width: 475px;
@@ -547,7 +525,7 @@
 				}
 				.scroller-container {
 					height: 300px;
-					border-right: 3px solid @gray-lighter;
+					border-right: 3px solid $gray-200;
 					margin-right: 3px;
 					cursor: pointer;
 					.scroller-thumb {
@@ -561,7 +539,7 @@
 						.scroller-thumb-icon {
 							width: 9px;
 							height: 40px;
-							background-color: @brand-primary;
+							background-color: $primary;
 							position: relative;
 							display: inline-block;
 							border-radius: 3px;
@@ -576,21 +554,22 @@
 					}
 				}
 			}
-			@media (max-width: @screen-sm-min) {
+			@include media-breakpoint-down(sm) {
 				.dropdown-menu {
 					width: 100%;
 				}
 			}
 		}
 		.progress-bar {
-			background-color: @brand-info;
+			background-color: $info;
 			display:block;
 			z-index: -1;
 			position: absolute;
 			transition: width 50ms ease-in;
+			height: 100%;
 		}
 	}
-	@media (max-width: @screen-sm-min) {
+	@include media-breakpoint-down(sm) {
 		.pagination-block {
 			width: 100%;
 		}
@@ -604,7 +583,7 @@
 		position: relative;
 
 		img, .user-icon {
-			.user-icon-style(20px, 1rem, 50%);
+			@include user-icon-style(20px, 1rem, 50%);
 			vertical-align: middle;
 			margin: 0 7px;
 		}
@@ -620,13 +599,13 @@
 			top: -36px;
 			left: 7px;
 
-			.transition(~"opacity ease 250ms, top ease 250ms")
+			@include transition("opacity ease 250ms, top ease 250ms")
 		}
 
 		&.replying::after {
 			opacity: 1;
 			top: -50px;
-			.animation(topic-reply-pulse 2s ease-in infinite);
+			animation: topic-reply-pulse 2s ease-in infinite;
 		}
 	}
 
@@ -639,34 +618,17 @@
 	}
 }
 
-.fork-thread-card {
-	position: fixed;
-	bottom: 10%;
-	right: 2rem;
-	z-index: 1;
-}
-
 .selection-tooltip-container {
 	position: absolute;
 	padding: 5px;
-	border: 1px solid @well-border;
-	background-color: @well-bg;
+	border: 1px solid $card-border-color;
+	background-color: $card-bg;
 	border-radius: 3px;
 	margin: 10px 0px 0px 0px;
 	z-index: 1;
 }
 
-@media screen and (min-width: @screen-sm-min) {
-	.fork-thread-card {
-		max-width: 33%;
-	}
-}
-
 [component="post"] {
-	.avatar.avatar-sm2x {
-		font-size: 2.875rem;
-	}
-
 	>.post-header [component="user/picture"], >.post-header [component="user/status"] {
 		opacity: 1;
 	}
@@ -675,15 +637,16 @@
 		opacity: 0;
 	}
 
-	&.bg-success {
+	&.selected {
 		background-color: initial;
 
 		>.post-header .icon:before {
-			border: 1px solid #5cb85c;
-    		color: #5cb85c;
+			border: 1px solid $success;
+    		color: $white;
+			background-color: $success;
     		-webkit-transition: .2s ease-in-out all;
     		transition: .2s ease-in-out all;
-    		content: "\f00c";
+			content: fa-content($fa-var-check);
     		padding: 14px;
 		    border-radius: 50%;
 		    opacity: 1;

package/scss/topics_list.scss

@@ -0,0 +1,17 @@
+#new-topics-alert {
+    margin-bottom: 0px;
+    padding: 10px 16px;
+}
+
+.topic-list-header {
+    top: calc(var(--panel-offset));
+    background-color: $body-bg;
+    z-index: $zindex-dropdown; // allows for top nav dropdowns to appear on top
+    border-top: 1px solid $post-border-color;
+    border-bottom: 1px solid $post-border-color;
+}
+
+.topic-list .title small {
+    font-size: 12px;
+    font-weight: normal;
+}

package/{less/variables.less → scss/variables.scss}

@@ -2,6 +2,6 @@
 //
 //## Post objects found on the category, recent, popular, etc. pages
 
-@post-padding:			20px;
-@post-border-color: 	@gray-lighter;
-@post-highlight:		@brand-info;
+$post-padding:			20px;
+$post-border-color: 	$gray-200;
+$post-highlight:		$info;

package/templates/account/blocks.tpl

@@ -1,35 +1,33 @@
 <div class="account">
 	<!-- IMPORT partials/account/header.tpl -->
+	<h1>[[pages:account/blocks, {username}]]</h1>
+	<div class="row justify-content-end mb-2">
+		<div class="col-3">
+			<div class="dropdown">
+				<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
 
-	<div class="users row">
-		<h1>[[pages:account/blocks, {username}]]</h1>
+				<ul class="dropdown-menu block-edit list-unstyled">
+					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+					{{{ each edit }}}
+					<li class="">
+						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+							<div class="text-truncate">
+								<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "24px", true)} {../username}</a>
+							</div>
+							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{../uid}" data-action="toggle">[[user:block_toggle]]</button>
+						</div>
+					</li>
+					{{{ end }}}
+				</ul>
+			</div>
+		</div>
+	</div>
 
-		<div class="col-sm-8 col-xs-12">
-			<ul id="users-container" class="users-container" data-nextstart="{nextStart}">
-				<!-- IMPORT partials/users_list.tpl -->
-			</ul>
+	<div class="users row">
+		<div class="col-12">
+			<!-- IMPORT partials/users_list.tpl -->
 			<div class="alert alert-warning text-center"<!-- IF users.length --> style="display: none;"<!-- END -->>[[user:has_no_blocks]]</div>
 			<!-- IMPORT partials/paginator.tpl -->
 		</div>
-		<div class="col-sm-4 col-xs-12">
-			<div class="panel panel-default">
-				<div class="panel-body form">
-					<div class="form-group">
-						<label for="user-search">[[users:search]]</label>
-						<input class="form-control" type="text" id="user-search" placeholder="[[users:enter_username]]" />
-						<ul class="block-edit list-group">
-							{{{ each edit }}}
-							<li class="list-group-item clearfix">
-								<button class="btn btn-sm btn-primary pull-right" data-uid="{../uid}" data-action="toggle">[[user:block_toggle]]</button>
-								<div class="pull-left">
-									<a href="{config.relative_path}/uid/{../uid}">{buildAvatar(edit, "sm", true)} {../username}</a>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
-					</div>
-				</div>
-			</div>
-		</div>
 	</div>
 </div>

package/templates/account/categories.tpl

@@ -3,21 +3,21 @@
 
 	<div class="row">
 		<h1>{title}</h1>
-		<div class="col-lg-12">
+		<div class="col-lg-12 mb-2">
 			<div class="btn-group bottom-sheet" component="category/watch/all">
-				<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
+				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
 					<span>[[user:change_all]]</span>
 					<span class="caret"></span>
 				</button>
 				<ul class="dropdown-menu">
-					<li><a href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
-					<li><a href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-					<li><a href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
+					<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+					<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
+					<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
 				</ul>
 			</div>
 		</div>
 		<div class="col-lg-12">
-			<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+			<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 				{{{each categories}}}
 				<!-- IMPORT partials/account/category-item.tpl -->
 				{{{end}}}

package/templates/account/consent.tpl

@@ -10,7 +10,7 @@
 		<div class="col-sm-6">
 			<!-- IF gdpr_consent -->
 			<div class="alert alert-success">
-				<i class="fa fa-check pull-right fa-3x"></i>
+				<i class="fa fa-check float-end fa-3x"></i>
 				[[user:consent.received]]
 			</div>
 			<!-- ELSE -->
@@ -22,8 +22,8 @@
 				</div>
 			</div>
 			<!-- END -->
-			<div class="panel panel-default">
-				<div class="panel-body">
+			<div class="card">
+				<div class="card-body">
 					<p>[[user:consent.email_intro]]</p>
 					<!-- IF digest.enabled -->
 					<p>[[user:consent.digest_frequency, {digest.frequency}]]</p>
@@ -32,7 +32,7 @@
 					<!-- END -->
 
 					<div class="text-center">
-						<a class="btn btn-default" href="./settings">
+						<a class="btn btn-outline-secondary" href="./settings">
 							<i class="fa fa-cog"></i>
 							[[pages:account/settings]]
 						</a>
@@ -41,8 +41,8 @@
 			</div>
 		</div>
 		<div class="col-sm-6">
-			<div class="panel panel-default">
-				<div class="panel-body">
+			<div class="card">
+				<div class="card-body">
 					<p><strong>[[user:consent.right_of_access]]</strong></p>
 					<p>[[user:consent.right_of_access_description]]</p>
 					<p><strong>[[user:consent.right_to_rectification]]</strong></p>
@@ -52,14 +52,14 @@
 					<p><strong>[[user:consent.right_to_data_portability]]</strong></p>
 					<p>[[user:consent.right_to_data_portability_description]]</p>
 
-					<div class="btn-group-vertical btn-block">
-						<a data-action="export-profile" class="btn btn-default">
+					<div class="btn-group-vertical d-grid">
+						<a data-action="export-profile" class="btn btn-outline-secondary">
 							<i class="fa fa-download"></i> [[user:consent.export_profile]]
 						</a>
-						<a data-action="export-posts" class="btn btn-default">
+						<a data-action="export-posts" class="btn btn-outline-secondary">
 							<i class="fa fa-download"></i> [[user:consent.export_posts]]
 						</a>
-						<a data-action="export-uploads" class="btn btn-default">
+						<a data-action="export-uploads" class="btn btn-outline-secondary">
 							<i class="fa fa-download"></i> [[user:consent.export_uploads]]
 						</a>
 					</div>

package/templates/account/edit/password.tpl

@@ -5,26 +5,24 @@
 		<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
 		<!-- IF isSelf -->
-		<div class="form-group">
-			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
-			<div class="controls">
-				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-			</div>
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
+			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
 		</div>
 		<!-- ENDIF isSelf -->
 
-		<div class="form-group">
-			<label class="control-label" for="inputNewPassword">[[user:password]]</label>
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputNewPassword">[[user:new_password]]</label>
 			<input class="form-control" type="password" id="inputNewPassword" placeholder="[[user:password]]" value="">
 			<span class="form-feedback" id="password-notify"></span>
 		</div>
 
-		<div class="form-group">
-			<label class="control-label" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputNewPasswordAgain">[[user:confirm_password]]</label>
 			<input class="form-control" type="password" id="inputNewPasswordAgain" placeholder="[[user:confirm_password]]" value="">
 			<span class="form-feedback" id="password-confirm-notify"></span>
 		</div>
-		
+
 		<div class="form-actions">
 			<button id="changePasswordBtn" class="btn btn-primary btn-block"><i class="hide fa fa-spinner fa-spin"></i> [[user:change_password]]</button>
 		</div>

package/templates/account/edit/username.tpl

@@ -2,21 +2,17 @@
 	<!-- IMPORT partials/account/header.tpl -->
 
 	<form class="form-horizontal edit-form">
-		<div class="control-group">
-			<label class="control-label" for="inputNewUsername">[[user:username]]</label>
-			<div class="controls">
-				<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
-			</div>
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputNewUsername">[[user:username]]</label>
+			<input class="form-control" type="text" id="inputNewUsername" placeholder="[[user:username]]" value="{username}">
 		</div>
 
 		<!-- disables autocomplete on FF --><input type="password" style="display:none">
 
 		<!-- IF isSelf -->
-		<div class="control-group">
-			<label class="control-label" for="inputCurrentPassword">[[user:current_password]]</label>
-			<div class="controls">
-				<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
-			</div>
+		<div class="mb-2">
+			<label class="form-label fw-bold" for="inputCurrentPassword">[[user:current_password]]</label>
+			<input autocomplete="off" class="form-control" type="password" id="inputCurrentPassword" placeholder="[[user:current_password]]" value=""<!-- IF !hasPassword --> disabled<!-- ENDIF !hasPassword -->>
 		</div>
 		<!-- ENDIF isSelf -->