nodebb-theme-persona 13.3.45 → 13.3.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-persona",
-  "version": "13.3.45",
+  "version": "13.3.46",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },

package/scss/category.scss

@@ -1,161 +1,5 @@
-.category {
-
-	.topic-list {
-		overflow: visible;
-	}
-
-	> ul {
-		> li {
-			list-style: none;
-
-			&:not(.unread) {
-				.lastpost {
-					border-color: lighten($gray-600, 20%) !important;
-				}
-
-				h2 a {
-					color: $text-muted;
-				}
-			}
-			.info {
-				margin-left: 62px;
-				font-size: 0.75rem;
-			}
-			&.deleted {
-				-moz-opacity: 0.30;
-				opacity: 0.30;
-			}
-
-			&.scheduled {
-				opacity: 0.7;
-			}
-
-			.select {
-				position: relative;
-				@include pointer;
-
-				&:before {
-					content: "";
-					display: none;
-				}
-
-				.fa-check {
-					padding: 14.5px;	/* 14.5*2 + 15 + 2px border = 46px */
-					border-radius: 50%;
-					position: absolute;
-					font-size: 15px;
-					opacity: 0;
-					top: 0px;
-					left: 0px;
-					border: 1px solid transparent;
-					background: $white;
-					width: 100%;
-					height: 100%;
-					padding: 14px;
-
-					&:before {
-						@include pointer;
-					}
-				}
-
-				.avatar {
-					opacity: 1;
-				}
-
-				.fa-check, .avatar {
-					@include transition(.2s ease-in-out all);
-				}
-
-				float: left;
-			}
-
-			.avatar .select {
-				.fa-check {
-					border: 1px solid $success;
-					color: $success;
-				}
-			}
-
-			.avatar .select:hover {
-				.avatar {
-					opacity: 0;
-				}
-
-				.fa-check {
-					border: 1px solid $success;
-					color: $success;
-					opacity: 1;
-				}
-			}
-
-			&.selected {
-				.select .avatar {
-					opacity: 0;
-				}
-
-				.avatar .select {
-					.fa-check {
-						opacity: 1;
-						background-color: $success;
-						border: 1px solid $success;
-						color: $white;
-						@include transition(all .15s ease-in-out);
-					}
-
-					&:hover .fa-check {
-						background-color: $success;
-						border: 1px solid $success;
-						color: $white;
-					}
-				}
-			}
-
-			.lastpost .user-icon {
-				display: inline-block;
-				@include user-icon-style(24px, 1.5rem, 50%);
-			}
-		}
-
-		&:last-child li {
-			border-bottom: 0;
-		}
-	}
-
-	.unread {
-		.title {
-			font-weight: bold;
-		}
-	}
-
-	.subcategory {
-		margin-bottom: 10px;
-	}
-}
-
 .category, .categories, .subcategory {
-	> p {
-		text-transform: uppercase;
-	}
-
-	.description {
-		font-weight: normal;
-		line-height: 1.2;
-		margin-top: 5px;
-		min-height: 25px
+	.description > p {
+		margin-bottom: 0;
 	}
-
-	.title, .description, .category-children {
-		margin-left: 62px;
-	}
-}
-
-.categories-title {
-	text-transform: uppercase;
-	margin: 0 0 10px;
-	font-size: 14px;
-	font-weight: normal;
-	line-height: 1.42857143;
 }
-
-
-

package/scss/chats.scss

@@ -3,7 +3,7 @@ body.page-user-chats {
 
 	> #panel {
 		height: $calcHeight;
-		> .container {
+		> #content {
 			height: 100%;
 		}
 	}

package/scss/modules/topics-list.scss

@@ -0,0 +1,41 @@
+ul.topics-list, ul.categories-list {
+	li {
+		&.deleted {
+			.meta, .topic-thumbs { display: none!important; }
+			opacity: 0.65;
+		}
+
+		&.selected {
+			background-color: mix($body-bg, $body-color, 90%);
+			[component="topic/select"] {
+				color: $success!important;
+				visibility: visible;
+			}
+		}
+		p {
+			margin: 0 !important;
+		}
+
+		// all other skins use link-color for unread titles
+		&.unread .title a {
+			color: $link-color;
+			font-weight: bold;
+		}
+
+		.ui-sortable-handle {
+			cursor: move;
+		}
+
+		// if only one thumb don't display
+		[data-numthumbs="1"] { display: none; }
+	}
+}
+
+// on default skin use primary color for unread titles
+.skin-noskin {
+	ul.topics-list, ul.categories-list {
+		li.unread .title {
+			color: $primary;
+		}
+	}
+}

package/scss/persona.scss

@@ -6,7 +6,6 @@
 @import "category";
 @import "tags";
 @import "noscript";
-@import "categories";
 @import "header";
 @import "account";
 @import "groups";
@@ -28,4 +27,4 @@
 @import "modules/necro-post";
 @import "modules/composer";
 @import "modules/user-menu";
-
+@import "modules/topics-list";

package/scss/topic.scss

@@ -20,14 +20,10 @@
 		}
 	}
 
-	[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;
@@ -240,50 +236,8 @@
 			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;
@@ -456,48 +410,6 @@
 	}
 }
 
-.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;

package/templates/categories.tpl

@@ -9,9 +9,9 @@
 		{{{ if pagination.pages.length }}}
 		<div><!-- IMPORT partials/category/selector-dropdown-left.tpl --></div>
 		{{{ else }}}
-		<h1 class="categories-title">[[pages:categories]]</h1>
+		<h1 class="categories-title text-uppercase text-sm mb-2 fw-normal">[[pages:categories]]</h1>
 		{{{ end }}}
-		<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/categories/item.tpl -->
 			{{{ end }}}

package/templates/header.tpl

@@ -33,7 +33,7 @@
 
 	<main id="panel" class="slideout-panel">
 		<nav class="navbar sticky-top navbar-expand-lg bg-light header border-bottom py-0" id="header-menu" component="navbar">
-			<div class="container justify-content-start flex-nowrap">
+			<div class="container-lg justify-content-start flex-nowrap">
 				<!-- IMPORT partials/menu.tpl -->
 			</div>
 		</nav>
@@ -42,6 +42,6 @@
 			const offset = Math.max(0, rect.bottom);
 			document.documentElement.style.setProperty('--panel-offset', offset + `px`);
 		</script>
-		<div class="container pt-3" id="content">
+		<div class="container-lg pt-3" id="content">
 		<!-- IMPORT partials/noscript/warning.tpl -->
 		<!-- IMPORT partials/noscript/message.tpl -->

package/templates/partials/categories/item.tpl

@@ -1,60 +1,58 @@
-<li component="categories/category" data-cid="{./cid}" data-numRecentReplies="1" class="row clearfix category-{./cid} {./unread-class}">
-	<meta itemprop="name" content="{../name}">
+<li component="categories/category" data-cid="{./cid}" class="w-100 py-2 mb-2 gap-lg-0 gap-2 d-flex flex-column flex-md-row align-items-start {{{ if !@last }}}border-bottom{{{ end }}} border-bottom-lg-0 category-{./cid} {./unread-class}">
+	<meta itemprop="name" content="{./name}">
 
-	<div class="content col-12 <!-- IF config.hideCategoryLastPost -->col-md-10 col-sm-12<!-- ELSE -->col-md-7 col-sm-9<!-- ENDIF config.hideCategoryLastPost -->">
-		<div class="float-start">
+	<div class="d-flex col-md-7 gap-2 gap-lg-3">
+		<div class="flex-shrink-0">
 		{buildCategoryIcon(@value, "48px", "rounded-circle")}
 		</div>
-		<h2 class="title">
-			<!-- IMPORT partials/categories/link.tpl -->
-		</h2>
-		<div>
-			<!-- IF ../descriptionParsed -->
-			<div class="description text-muted">
-				{../descriptionParsed}
+		<div class="flex-grow-1 d-flex flex-wrap gap-1">
+			<h2 class="title text-break fs-4 fw-semibold m-0 tracking-tight w-100">
+				<!-- IMPORT partials/categories/link.tpl -->
+			</h2>
+			{{{ if ./descriptionParsed }}}
+			<div class="description text-muted text-sm w-100">
+				{./descriptionParsed}
 			</div>
-			<!-- ENDIF ../descriptionParsed -->
-			<!-- IF !config.hideSubCategories -->
-			{{{ if ../children.length }}}
-			<div class="category-children">
-				{{{ each ../children }}}
-				{{{ if !../isSection }}}
-				<span class="category-children-item">
+			{{{ end }}}
+			{{{ if ./teaser.timestampISO }}}
+			<div class="d-block d-md-none">
+				<a class="permalink timeago text-muted" title="{../teaser.timestampISO}" href="{../teaser.url}">
+				</a>
+			</div>
+			{{{ end }}}
+			{{{ if !config.hideSubCategories }}}
+			{{{ if ./children.length }}}
+			<div class="category-children row row-cols-1 row-cols-md-2 g-2 my-1 w-100">
+				{{{ each ./children }}}
+				{{{ if !./isSection }}}
+				<span class="category-children-item small d-flex gap-1 align-items-center">
 					{buildCategoryIcon(@value, "24px", "rounded-circle")}
-					{{{ if ../link }}}
-					<a href="{../link}">{../name}</a>
-					{{{ else }}}
-					<a href="{config.relative_path}/category/{../slug}">{../name}</a>
-					{{{ end }}}
+					<a href="{{{ if ./link }}}{./link}{{{ else }}}{config.relative_path}/category/{./slug}{{{ end }}}" class="text-reset">{./name}</a>
 				</span>
 				{{{ end }}}
 				{{{ end }}}
 			</div>
 			{{{ end }}}
-			<!-- ENDIF !config.hideSubCategories -->
+			{{{ end }}}
 		</div>
-		<span class="d-block d-sm-none float-end">
-			<!-- IF ../teaser.timestampISO -->
-			<a class="permalink" href="{../teaser.url}">
-				<small class="timeago" title="{../teaser.timestampISO}"></small>
-			</a>
-			<!-- ENDIF ../teaser.timestampISO -->
-		</span>
-	</div>
-
-	<!-- IF !./link -->
-	<div class="col-md-1 d-none d-md-block stats text-muted">
-		<span title="{./totalTopicCount}">{humanReadableNumber(./totalTopicCount)}</span><br />
-		<small>[[global:topics]]</small>
 	</div>
-	<div class="col-md-1 d-none d-md-block stats text-muted">
-		<span title="{./totalPostCount}">{humanReadableNumber(./totalPostCount)}</span><br />
-		<small>[[global:posts]]</small>
-	</div>
-	<!-- IF !config.hideCategoryLastPost -->
-	<div class="col-md-3 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
-		<!-- IMPORT partials/categories/lastpost.tpl -->
+	{{{ if (!./link && !./isSection) }}}
+	<div class="d-flex col-md-5 col-12 align-content-stretch">
+		<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr;">
+			<div class="p-1 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+				<span class="fs-4" title="{./totalTopicCount}">{humanReadableNumber(./totalTopicCount, 0)}</span>
+				<span class="text-uppercase text-xs">[[global:topics]]</span>
+			</div>
+			<div class="p-1 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+				<span class="fs-4" title="{./totalPostCount}">{humanReadableNumber(./totalPostCount, 0)}</span>
+				<span class="text-uppercase text-xs">[[global:posts]]</span>
+			</div>
+		</div>
+		{{{ if !config.hideCategoryLastPost }}}
+		<div component="topic/teaser" class="teaser col-md-6 col-12 d-none d-md-block">
+			<!-- IMPORT partials/categories/lastpost.tpl -->
+		</div>
+		{{{ end }}}
 	</div>
-	<!-- ENDIF !config.hideCategoryLastPost -->
-	<!-- ENDIF !./link -->
+	{{{ end }}}
 </li>

package/templates/partials/categories/lastpost.tpl

@@ -1,26 +1,24 @@
-<div class="lastpost background-link-container" style="border-color: {../bgColor}">
-	{{{each ./posts}}}
-	<!-- IF @first -->
-	<div component="category/posts">
-		<a class="background-link" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->"></a>
-		<p>
-			<a href="{config.relative_path}/user/{../user.userslug}">{buildAvatar(posts.user, "24px", true)}</a>
-			<a class="permalink text-muted" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
-				<small class="timeago" title="{../timestampISO}"></small>
-			</a>
-		</p>
-		<div class="post-content">
-			{../content}
+<div class="lastpost border-start border-4 lh-sm h-100" style="border-color: {./bgColor}!important;">
+	{{{ each ./posts }}}
+	{{{ if @first }}}
+	<div component="category/posts" class="ps-2 text-xs d-flex flex-column h-100 gap-1">
+		<div class="text-nowrap text-truncate">
+			<a class="text-decoration-none" href="{config.relative_path}/user/{./user.userslug}">{buildAvatar(posts.user, "18px", true, "avatar-tooltip")}</a>
+			<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" title="{./timestampISO}" aria-label="[[global:lastpost]]"></a>
+		</div>
+		<div class="post-content text-xs text-break line-clamp-sm-2 lh-sm position-relative flex-fill">
+			<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./topic.slug}{{{ if ./index }}}/{./index}{{{ end }}}" aria-label="[[global:lastpost]]"></a>
+			{./content}
 		</div>
 	</div>
-	<!-- ENDIF @first -->
-	{{{end}}}
+	{{{ end }}}
+	{{{ end }}}
 
-	<!-- IF !../posts.length -->
-	<div component="category/posts">
-		<div class="post-content">
+	{{{ if !./posts.length }}}
+	<div component="category/posts" class="ps-2">
+		<div class="post-content overflow-hidden text-xs">
 			[[category:no-new-posts]]
 		</div>
 	</div>
-	<!-- ENDIF !../posts.length -->
+	{{{ end }}}
 </div>

package/templates/partials/topic/quickreply.tpl

@@ -1,28 +1,26 @@
-<!-- IF privileges.topics:reply -->
-<div component="topic/quickreply/container" class="clearfix quick-reply">
-	<div class="icon float-start hidden-xs">
-		<a data-uid="{loggedInUser.uid}" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
+{{{ if privileges.topics:reply }}}
+<div component="topic/quickreply/container" class="quick-reply d-flex gap-3 mb-4">
+	<div class="icon hidden-xs">
+		<a class="d-inline-block position-relative" href="{{{ if loggedInUser.userslug }}}{config.relative_path}/user/{loggedInUser.userslug}{{{ else }}}#{{{ end }}}">
 			{buildAvatar(loggedInUser, "48px", true, "", "user/picture")}
-			{{{ if loggedInUser.status }}}
-			<i component="user/status" class="fa fa-circle status {loggedInUser.status}" title="[[global:{loggedInUser.status}]]"></i>
-			{{{ end }}}
 		</a>
 	</div>
-	<form method="post" action="{config.relative_path}/compose">
+	<form class="flex-grow-1 d-flex flex-column gap-2" method="post" action="{config.relative_path}/compose">
 		<input type="hidden" name="tid" value="{tid}" />
 		<input type="hidden" name="_csrf" value="{config.csrf_token}" />
-		<div class="quickreply-message">
-			<textarea name="content" component="topic/quickreply/text" class="form-control mousetrap" rows="5" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
+		<div class="quickreply-message position-relative">
+			<textarea rows="4" name="content" component="topic/quickreply/text" class="form-control mousetrap" placeholder="[[modules:composer.textarea.placeholder]]"></textarea>
 			<div class="imagedrop"><div>[[topic:composer.drag-and-drop-images]]</div></div>
 		</div>
-		<div class="d-flex justify-content-end gap-1">
-			<button type="submit" component="topic/quickreply/expand" class="btn btn-outline-primary btn-sm" formmethod="get"><i class="fa fa-expand"></i></button>
-			<button type="submit" component="topic/quickreply/button" class="btn btn-primary btn-sm">[[topic:post-quick-reply]]</button>
+		<div>
+			<div class="d-flex justify-content-end gap-2">
+				<button type="submit" component="topic/quickreply/expand" class="btn btn-ghost btn-sm border" title="[[topic:open-composer]]"><i class="fa fa-expand"></i></button>
+				<button type="submit" component="topic/quickreply/button" class="btn btn-sm btn-primary">[[topic:post-quick-reply]]</button>
+			</div>
 		</div>
 	</form>
-	<form component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
+	<form class="d-none" component="topic/quickreply/upload" method="post" enctype="multipart/form-data">
 		<input type="file" name="files[]" multiple class="hidden"/>
 	</form>
-
 </div>
-<!-- ENDIF privileges.topics:reply -->
+{{{ end }}}

package/templates/partials/topic/stats.tpl

@@ -1,12 +1,15 @@
-<div class="stats text-muted">
-	<i class="fa fa-fw fa-user" title="[[global:posters]]"></i>
-	<span title="{postercount}">{humanReadableNumber(postercount)}</span>
-</div>
-<div class="stats text-muted">
-	<i class="fa fa-fw fa-pencil" title="[[global:posts]]"></i>
-	<span component="topic/post-count" title="{postcount}">{humanReadableNumber(postcount)}</span>
-</div>
-<div class="stats text-muted">
-	<i class="fa fa-fw fa-eye" title="[[global:views]]"></i>
-	<span title="{viewcount}">{humanReadableNumber(viewcount)}</span>
-</div>
+<span class="badge text-body border border-gray-300 stats text-xs">
+	<i class="fa-regular fa-fw fa-message visible-xs-inline" title="[[global:posts]]"></i>
+	<span component="topic/post-count" title="{postcount}" class="fw-bold">{humanReadableNumber(postcount)}</span>
+	<span class="hidden-xs text-lowercase fw-normal">[[global:posts]]</span>
+</span>
+<span class="badge text-body border border-gray-300 stats text-xs">
+	<i class="fa fa-fw fa-user visible-xs-inline" title="[[global:posters]]"></i>
+	<span title="{postercount}" class="fw-bold">{humanReadableNumber(postercount)}</span>
+	<span class="hidden-xs text-lowercase fw-normal">[[global:posters]]</span>
+</span>
+<span class="badge text-body border border-gray-300 stats text-xs">
+	<i class="fa fa-fw fa-eye visible-xs-inline" title="[[global:views]]"></i>
+	<span class="fw-bold" title="{viewcount}">{humanReadableNumber(viewcount)}</span>
+	<span class="hidden-xs text-lowercase fw-normal">[[global:views]]</span>
+</span>

package/templates/partials/topic/tag.tpl

@@ -1 +1 @@
-<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="tag tag-item fw-bold tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>

package/templates/partials/topic/tags.tpl

@@ -1,3 +1 @@
-{{{ each tags }}}
-<!-- IMPORT partials/topic/tag.tpl -->
-{{{ end }}}
+{{{ each tags }}}<!-- IMPORT partials/topic/tag.tpl -->{{{ end }}}

package/templates/partials/topics_list.tpl

@@ -1,115 +1,129 @@
-<ul component="category" class="topic-list" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
-	{{{each topics}}}
-	<li component="category/topic" class="row clearfix category-item {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
-		<link itemprop="url" content="{config.relative_path}/topic/{../slug}" />
-		<meta itemprop="name" content="{function.stripTags, ../title}" />
+<ul component="category" class="topics-list list-unstyled" itemscope itemtype="http://www.schema.org/ItemList" data-nextstart="{nextStart}" data-set="{set}">
+
+	{{{ each topics }}}
+	<li component="category/topic" class="category-item hover-parent border-bottom py-3 py-lg-4 d-flex flex-column flex-lg-row align-items-start {function.generateTopicClass}" <!-- IMPORT partials/data/category.tpl -->>
+		<link itemprop="url" content="{config.relative_path}/topic/{./slug}" />
+		<meta itemprop="name" content="{function.stripTags, ./title}" />
 		<meta itemprop="itemListOrder" content="descending" />
 		<meta itemprop="position" content="{increment(./index, "1")}" />
-		<a id="{../index}" data-index="{../index}" component="topic/anchor"></a>
+		<a id="{./index}" data-index="{./index}" component="topic/anchor"></a>
 
-		<div class="col-md-6 col-sm-9 col-10 content">
-			<div class="avatar float-start me-2">
-				<!-- IF showSelect -->
-				<div class="select" component="topic/select">
-					{{{ if ./thumbs.length }}}
-					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
-					{{{ else }}}
-					{buildAvatar(../user, "48px", true, "not-responsive")}
-					{{{ end }}}
-					<i class="fa fa-check"></i>
+		<div class="d-flex p-0 col-12 col-lg-7 gap-2 gap-lg-3 pe-1 align-items-start {{{ if config.theme.mobileTopicTeasers }}}mb-2 mb-lg-0{{{ end }}}">
+			<div class="flex-shrink-0 position-relative">
+				<a class="text-decoration-none" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
+					{buildAvatar(./user, "40px", true, "avatar avatar-tooltip")}
+				</a>
+				{{{ if showSelect }}}
+				<div class="checkbox position-absolute top-100 start-50 translate-middle-x pt-2 m-0 d-none d-lg-flex" style="max-width:max-content">
+					<i component="topic/select" class="fa text-muted pointer fa-square-o p-1 hover-visible"></i>
 				</div>
-				<!-- ENDIF showSelect -->
+				{{{ end }}}
+			</div>
+			<div class="flex-grow-1 d-flex flex-wrap gap-1 position-relative">
+				<h3 component="topic/header" class="title text-break fs-5 fw-semibold m-0 tracking-tight w-100 {{{ if showSelect }}}me-4 me-lg-0{{{ end }}}">
+					<a class="text-reset" href="{{{ if topics.noAnchor }}}#{{{ else }}}{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}{{{ end }}}">{./title}</a>
+				</h3>
+				<span component="topic/labels" class="d-flex flex-wrap gap-1 w-100 align-items-center">
+					<span component="topic/watched" class="badge border border-gray-300 text-body {{{ if !./followed }}}hidden{{{ end }}}">
+						<i class="fa fa-bell-o"></i>
+						<span>[[topic:watching]]</span>
+					</span>
+					<span component="topic/ignored" class="badge border border-gray-300 text-body {{{ if !./ignored }}}hidden{{{ end }}}">
+						<i class="fa fa-eye-slash"></i>
+						<span>[[topic:ignoring]]</span>
+					</span>
+					<span component="topic/scheduled" class="badge border border-gray-300 text-body {{{ if !./scheduled }}}hidden{{{ end }}}">
+						<i class="fa fa-clock-o"></i>
+						<span>[[topic:scheduled]]</span>
+					</span>
+					<span component="topic/pinned" class="badge border border-gray-300 text-body {{{ if (./scheduled || !./pinned) }}}hidden{{{ end }}}">
+						<i class="fa fa-thumb-tack"></i>
+						<span>{{{ if !./pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {isoTimeToLocaleString(./pinExpiryISO, config.userLang)}]]{{{ end }}}</span>
+					</span>
+					<span component="topic/locked" class="badge border border-gray-300 text-body {{{ if !./locked }}}hidden{{{ end }}}">
+						<i class="fa fa-lock"></i>
+						<span>[[topic:locked]]</span>
+					</span>
+					<span component="topic/moved" class="badge border border-gray-300 text-body {{{ if !./oldCid }}}hidden{{{ end }}}">
+						<i class="fa fa-arrow-circle-right"></i>
+						<span>[[topic:moved]]</span>
+					</span>
+					{{{each ./icons}}}<span class="lh-1">{@value}</span>{{{end}}}
 
-				<!-- IF !showSelect -->
-				<a href="<!-- IF topics.user.userslug -->{config.relative_path}/user/{topics.user.userslug}<!-- ELSE -->#<!-- ENDIF topics.user.userslug -->" class="float-start">
-					{{{ if ./thumbs.length }}}
-					<img src="{./thumbs.0.url}" class="user-img not-responsive" />
-					{{{ else }}}
-					{buildAvatar(../user, "48px", true, "not-responsive")}
+					{{{ if !template.category }}}
+					{function.buildCategoryLabel, ./category, "a", "border"}
 					{{{ end }}}
-				</a>
-				<!-- ENDIF !showSelect -->
-			</div>
 
-			<h2 component="topic/header" class="title mb-1">
-				<i component="topic/watched" class="fa fa-bell-o {{{ if !topics.followed }}}hidden{{{ end }}}" title="[[topic:watching]]"></i>
-				<i component="topic/watched" class="fa fa-eye-slash {{{ if !topics.ignored }}}hidden{{{ end }}}" title="[[topic:ignoring]]"></i>
-				<i component="topic/scheduled" class="fa fa-clock-o {{{ if !topics.scheduled }}}hidden{{{ end }}}" title="[[topic:scheduled]]"></i>
-				<i component="topic/pinned" class="fa fa-thumb-tack {{{ if (topics.scheduled || !topics.pinned) }}}hidden{{{ end }}}" title="{{{ if !../pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {../pinExpiryISO}]]{{{ end }}}"></i>
-				<i component="topic/locked" class="fa fa-lock {{{ if !topics.locked }}}hidden{{{ end }}}" title="[[topic:locked]]"></i>
-				<i component="topic/moved" class="fa fa-arrow-circle-right {{{ if !topics.oldCid }}}hidden{{{ end }}}" title="[[topic:moved]]"></i>
-				{{{each topics.icons}}}{@value}{{{end}}}
+					<span data-tid="{./tid}" component="topic/tags" class="lh-1 tag-list hidden-xs d-flex flex-wrap gap-1 {{{ if !./tags.length }}}hidden{{{ end }}}">
+						{{{ each ./tags }}}
+						<a href="{config.relative_path}/tags/{./valueEncoded}"><span class="badge border border-gray-300 fw-normal tag tag-class-{./class}" data-tag="{./value}">{./valueEscaped}</span></a>
+						{{{ end }}}
+					</span>
 
-				{{{ if topics.noAnchor }}}
-				<span>{./title}</span>
-				{{{ else }}}
-				<a href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}">{./title}</a>
-				{{{ end }}}
-			</h2>
-			<div class="info">
-				<!-- IF !template.category -->
-				<div class="category-item d-inline-block">
-					{buildCategoryIcon(./category, "24px", "rounded-circle")}
-					<a class="text-muted" href="{config.relative_path}/category/{topics.category.slug}">{topics.category.name}</a>
-				</div>
-				&bull;
-				<!-- ENDIF !template.category -->
+					<div class="d-flex gap-1 d-block d-lg-none w-100">
+						<span class="badge text-body border stats text-xs text-muted">
+							<i class="fa-regular fa-fw fa-message"></i>
+							<span component="topic/post-count" class="fw-normal">{humanReadableNumber(./postcount, 0)}</span>
+						</span>
 
+						<a href="{config.relative_path}/topic/{./slug}{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}/{./teaser.index}{{{ end }}}" class="border badge bg-transparent text-muted fw-normal timeago" title="{{{ if (./teaser.timestampISO && !config.theme.mobileTopicTeasers) }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></a>
+					</div>
 
-				<span data-tid="{./tid}" component="topic/tags" class="tag-list hidden-xs {{{ if !./tags.length }}}hidden{{{ end}}}">
-					{{{ each ./tags }}}
-					<!-- IMPORT partials/topic/tag.tpl -->
-					{{{ end }}}
-					&bull;
+					<a href="{config.relative_path}/topic/{./slug}" class="d-none d-lg-block badge bg-transparent text-muted fw-normal timeago" title="{./timestampISO}"></a>
 				</span>
-
-				<span class="hidden-xs"><span class="timeago text-muted" title="{./timestampISO}"></span> &bull; <a class="text-muted" href="{{{ if ./user.userslug }}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">{./user.displayname}</a></span>
-
-				<span class="visible-xs-inline timeago text-muted" title="{{{ if ./teaser.timestampISO }}}{./teaser.timestampISO}{{{ else }}}{./timestampISO}{{{ end }}}"></span>
+				{{{ if showSelect }}}
+				<div class="checkbox position-absolute top-0 end-0 m-0 d-flex d-lg-none" style="max-width:max-content">
+					<i component="topic/select" class="fa fa-square-o text-muted pointer p-1"></i>
+				</div>
+				{{{ end }}}
 			</div>
+			{{{ if ./thumbs.length }}}
+			<a class="topic-thumbs position-relative text-decoration-none flex-shrink-0 d-none d-xl-block" href="{config.relative_path}/topic/{./slug}{{{ if ./bookmark }}}/{./bookmark}{{{ end }}}" aria-label="[[topic:thumb-image]]">
+				<img class="topic-thumb rounded-1 bg-light" style="width:auto;max-width: 5.33rem;height: 3.33rem;object-fit: contain;" src="{./thumbs.0.url}" alt=""/>
+				<span data-numthumbs="{./thumbs.length}" class="px-1 position-absolute top-0 start-100 translate-middle badge rounded text-bg-info" style="z-index: 1;">+{increment(./thumbs.length, "-1")}</span>
+			</a>
+			{{{ end }}}
 		</div>
 
-		<div class="mobile-stat col-2 visible-xs text-end">
-			<span>{humanReadableNumber(topics.postcount)}</span> <a href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"><i class="fa fa-arrow-circle-right"></i></a>
-		</div>
-
-		<div class="col-md-1 hidden-sm hidden-xs stats stats-votes">
-			<!-- IF !reputation:disabled -->
-			<span title="{topics.votes}">{humanReadableNumber(topics.votes)}</span><br />
-			<small>[[global:votes]]</small>
-			<!-- END -->
-		</div>
-
-		<div class="col-md-1 hidden-sm hidden-xs stats stats-postcount">
-			<span title="{topics.postcount}">{humanReadableNumber(topics.postcount)}</span><br />
-			<small>[[global:posts]]</small>
-		</div>
-
-		<div class="col-md-1 hidden-sm hidden-xs stats stats-viewcount">
-			<span title="{topics.viewcount}">{humanReadableNumber(topics.viewcount)}</span><br />
-			<small>[[global:views]]</small>
-		</div>
-
-		<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
-			<div class="lastpost background-link-container" style="border-color: {topics.category.bgColor}">
-				<a class="background-link" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}"></a>
-				<!-- IF topics.unreplied -->
-				<p>
-					[[category:no-replies]]
-				</p>
-				<!-- ELSE -->
-				<!-- IF topics.teaser.pid -->
-				<p>
-					<a href="{config.relative_path}/user/{topics.teaser.user.userslug}">{buildAvatar(topics.teaser.user, "24px", true, "not-responsive")}</a>
-					<a class="permalink text-muted" href="{config.relative_path}/topic/{topics.slug}/{topics.teaser.index}">
-						<span class="timeago" title="{topics.teaser.timestampISO}"></span>
-					</a>
-				</p>
-				<div class="post-content">
-					{topics.teaser.content}
+		<div class="d-flex p-0 col-lg-5 col-12 align-content-stretch">
+			<div class="meta stats d-none d-lg-grid col-6 gap-1 pe-2 text-muted" style="grid-template-columns: 1fr 1fr 1fr;">
+				{{{ if !reputation:disabled }}}
+				<div class="stats-votes border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./votes}">{humanReadableNumber(./votes, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:votes]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-chevron-up"></i>
+				</div>
+				{{{ end }}}
+				<div class="stats-postcount border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./postcount}">{humanReadableNumber(./postcount, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:posts]]</span>
+					<i class="d-xl-none fa-regular fa-fw text-xs text-muted opacity-75 fa-message"></i>
+				</div>
+				<div class="stats-viewcount border-0 p-2 overflow-hidden rounded-1 d-flex flex-column align-items-center">
+					<span class="fs-5 ff-secondary lh-1" title="{./viewcount}">{humanReadableNumber(./viewcount, 0)}</span>
+					<span class="d-none d-xl-flex text-lowercase text-xs">[[global:views]]</span>
+					<i class="d-xl-none fa fa-fw text-xs text-muted opacity-75 fa-eye"></i>
+				</div>
+			</div>
+			<div component="topic/teaser" class="meta teaser col-lg-6 col-12 {{{ if !config.theme.mobileTopicTeasers }}}d-none d-lg-block{{{ end }}}">
+				<div class="lastpost border-start border-4 lh-sm h-100 d-flex flex-column gap-1" style="border-color: {./category.bgColor}!important;">
+					{{{ if ./unreplied }}}
+					<div class="ps-2 text-xs">
+						[[category:no-replies]]
+					</div>
+					{{{ else }}}
+					{{{ if ./teaser.pid }}}
+					<div class="ps-2">
+						<a href="{{{ if ./teaser.user.userslug }}}{config.relative_path}/user/{./teaser.user.userslug}{{{ else }}}#{{{ end }}}" class="text-decoration-none">{buildAvatar(./teaser.user, "18px", true, "avatar-tooltip not-responsive")}</a>
+						<a class="permalink text-muted timeago text-xs" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" title="{./teaser.timestampISO}" aria-label="[[global:lastpost]]"></a>
+					</div>
+					<div class="post-content text-xs ps-2 line-clamp-sm-2 lh-sm text-break position-relative flex-fill">
+						<a class="stretched-link" tabindex="-1" href="{config.relative_path}/topic/{./slug}/{./teaser.index}" aria-label="[[global:lastpost]]"></a>
+						{./teaser.content}
+					</div>
+					{{{ end }}}
+					{{{ end }}}
 				</div>
-				<!-- ENDIF topics.teaser.pid -->
-				<!-- ENDIF topics.unreplied -->
 			</div>
 		</div>
 	</li>

package/templates/topic.tpl

@@ -22,8 +22,8 @@
 				</div>
 			</h1>
 
-			<div class="topic-info pb-2 d-flex gap-3 align-items-center flex-wrap">
-				<span component="topic/labels" class="d-flex text-md gap-2 {{{ if (!scheduled && (!pinned && (!locked && (!oldCid && !icons.length)))) }}}hidden{{{ end }}}">
+			<div class="topic-info pb-2 d-flex gap-2 align-items-center flex-wrap">
+				<span component="topic/labels" class="d-flex gap-2 {{{ if (!scheduled && (!pinned && (!locked && (!oldCid && !icons.length)))) }}}hidden{{{ end }}}">
 					<span component="topic/scheduled" class="badge badge border border-gray-300 text-body {{{ if !scheduled }}}hidden{{{ end }}}">
 						<i class="fa fa-clock-o"></i> [[topic:scheduled]]
 					</span>
@@ -38,16 +38,9 @@
 					</a>
 					{{{each icons}}}<span class="lh-1">{@value}</span>{{{end}}}
 				</span>
-
-				<div class="category-item d-inline-block">
-					{buildCategoryIcon(category, "24px", "rounded-circle")}
-					<a href="{config.relative_path}/category/{category.slug}">{category.name}</a>
-				</div>
-
-				<div data-tid="{./tid}" component="topic/tags" class="tags tag-list d-inline-block hidden-xs hidden-empty"><!-- IMPORT partials/topic/tags.tpl --></div>
-				<div class="d-inline-block hidden-xs">
-					<!-- IMPORT partials/topic/stats.tpl -->
-				</div>
+				{function.buildCategoryLabel, category, "a", "border"}
+				<div data-tid="{./tid}" component="topic/tags" class="lh-1 tags tag-list d-flex flex-wrap hidden-xs hidden-empty gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>
+				<div class="d-flex hidden-xs gap-2"><!-- IMPORT partials/topic/stats.tpl --></div>
 				{{{ if !feeds:disableRSS }}}
 				{{{ if rssFeedUrl }}}<a class="hidden-xs" target="_blank" href="{rssFeedUrl}"><i class="fa fa-rss-square"></i></a>{{{ end }}}
 				{{{ end }}}

package/scss/categories.scss

@@ -1,205 +0,0 @@
-.categories, .category > ul {
-	list-style-type: none;
-	padding: 0;
-
-	> li {
-
-		padding-bottom: 10px;
-
-		@include media-breakpoint-down(sm) {
-			border-top: 1px solid $gray-200;
-			&:last-child {
-				border-bottom: 1px solid $gray-200;
-			};
-		}
-
-		min-height: 53px;
-
-		.content {
-			padding: 10px 15px;
-
-			img, .user-icon {
-				@include user-icon-style(46px, 2.4rem, 50%);
-			}
-
-			h2 {
-				display: block;
-				word-wrap: break-word;
-				overflow: hidden;
-				font-size: 18px;
-				line-height: 22px;
-			}
-		}
-
-		@media (max-width: 500px) {
-			.teaser {
-				position: absolute;
-				right: 4px;
-			}
-		}
-
-		.mobile-stat {
-			padding-left: 0px;
-			padding-top: 10px;
-			font-size: 16px;
-		}
-
-		.lastpost {
-			border-left: 4px solid #ccc;
-			text-align: left;
-			margin-top: 10px;
-			overflow: hidden;
-			height: 53px;
-			font-size: 12px;
-			line-height: 14px;
-
-			> * {
-				padding-left: 20px;
-			}
-
-			p {
-				margin: 0;
-				.emoji {
-					max-width: 12px;
-					max-height: 12px;
-				}
-			}
-
-			.post-content {
-				overflow: hidden;
-				blockquote {
-					display: none;
-				}
-			}
-
-			.user-icon {
-				display: inline-block;
-				@include user-icon-style(24px, 1.5rem, 50%);
-			}
-		}
-
-		.category-children {
-			.category-children-item {
-				min-width: 180px;
-				margin-right: 10px;
-				margin-bottom: 1px;
-				display: inline-block;
-			}
-		}
-
-		[component="topic/header"] > i[component="topic/pinned"] {
-			color: $danger;
-		}
-	}
-
-	&.ui-sortable > li .content h2 {
-		> [component="topic/pinned"] {
-			&:after {
-				position: absolute;
-				top: 0.5rem;
-				left: calc(62px + 2rem);
-				width: 4rem;
-				height: 3rem;
-				background: rgba(0, 0, 0, 0.5);
-				color: rgba(255, 255, 255, 0.9);
-				font-family: "FontAwesome";
-				content: "\f07d  \f255";
-				text-align: center;
-				font-size: 1.5rem;
-				padding-top: 0.66rem;
-				cursor: move;
-				opacity: 0;
-
-				-webkit-transition: opacity 100ms linear;
-				-moz-transition: opacity 100ms linear;
-				-ms-transition: opacity 100ms linear;
-				-o-transition: opacity 100ms linear;
-				transition: opacity 100ms linear;
-			}
-		}
-
-		&:hover {
-			> [component="topic/pinned"] {
-				&:after {
-					opacity: 1;
-				}
-			}
-		}
-	}
-}
-
-
-.category-header {
-	width: 100%;
-	height: 110px;
-	text-align: center;
-	margin: 0;
-	padding-top:25px;
-	@include pointer;
-	margin-bottom: 10px;
-	overflow:hidden;
-
-	&:hover {
-		filter: brightness(115%);
-		-webkit-filter: brightness(115%);
-	}
-
-	.category-box {
-		height:90px;
-
-		.post-preview {
-			padding-left:10px;
-			padding-right:10px;
-			text-align:left;
-			img {
-				width:60px;
-				height:60px;
-				padding-right:5px;
-			}
-
-			p {
-				overflow: hidden;
-				text-overflow:ellipsis;
-				height:60px;
-			}
-		}
-	}
-}
-
-.category-header-image-auto {
-	-webkit-background-size: auto!important;
-	-moz-background-size: auto!important;
-	-o-background-size: auto!important;
-	background-size: auto!important;
-	background-position: 0% 0% !important;
-}
-
-.category-header-image-cover {
-	-webkit-background-size: cover!important;
-	-moz-background-size: cover!important;
-	-o-background-size: cover!important;
-	background-size: cover!important;
-	background-position: center!important;
-}
-
-.category-header-image-contain {
-	-webkit-background-size: contain!important;
-	-moz-background-size: contain!important;
-	-o-background-size: contain!important;
-	background-size: contain!important;
-	background-position: center!important;
-}
-
-
-.stats {
-	font-size: 20px;
-	text-align: center;
-	margin-top: 10px;
-	line-height: 22px;
-
-	small {
-		text-transform: uppercase;
-		font-weight: 300;
-		font-size: 12px;
-	}
-}