nodebb-theme-persona 12.1.4 → 12.1.6

package/templates/partials/categories/item.tpl

@@ -1,25 +1,39 @@
 <li component="categories/category" data-cid="{../cid}" data-numRecentReplies="1" class="row clearfix category-{../cid}">
 	<meta itemprop="name" content="{../name}">
 
-	<div class="content col-xs-12 <!-- IF config.hideCategoryLastPost -->col-md-10 col-sm-12<!-- ELSE -->col-md-7 col-sm-9<!-- ENDIF config.hideCategoryLastPost -->">
-		<div class="icon pull-left" style="{function.generateCategoryBackground}">
-			<i class="fa fa-fw {../icon}"></i>
+	<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">
+		{buildCategoryIcon(@value, "48px", "rounded-circle")}
 		</div>
-
 		<h2 class="title">
 			<!-- IMPORT partials/categories/link.tpl -->
 		</h2>
 		<div>
 			<!-- IF ../descriptionParsed -->
-			<div class="description">
+			<div class="description text-muted">
 				{../descriptionParsed}
 			</div>
 			<!-- ENDIF ../descriptionParsed -->
 			<!-- IF !config.hideSubCategories -->
-			{function.generateChildrenCategories}
+			{{{ if ../children.length }}}
+			<div class="category-children">
+				{{{ each ../children }}}
+				{{{ if !../isSection }}}
+				<span class="category-children-item">
+					{buildCategoryIcon(@value, "24px", "rounded-circle")}
+					{{{ if ../link }}}
+					<a href="{../link}">{../name}</a>
+					{{{ else }}}
+					<a href="{config.relative_path}/category/{../slug}">{../name}</a>
+					{{{ end }}}
+				</span>
+				{{{ end }}}
+				{{{ end }}}
+			</div>
+			{{{ end }}}
 			<!-- ENDIF !config.hideSubCategories -->
 		</div>
-		<span class="visible-xs pull-right">
+		<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>
@@ -29,16 +43,16 @@
 	</div>
 
 	<!-- IF !../link -->
-	<div class="col-md-1 hidden-sm hidden-xs stats">
+	<div class="col-md-1 d-none d-md-block stats text-muted">
 		<span class="{../unread-class} human-readable-number" title="{../totalTopicCount}">{../totalTopicCount}</span><br />
 		<small>[[global:topics]]</small>
 	</div>
-	<div class="col-md-1 hidden-sm hidden-xs stats">
+	<div class="col-md-1 d-none d-md-block stats text-muted">
 		<span class="{../unread-class} human-readable-number" title="{../totalPostCount}">{../totalPostCount}</span><br />
 		<small>[[global:posts]]</small>
 	</div>
 	<!-- IF !config.hideCategoryLastPost -->
-	<div class="col-md-3 col-sm-3 teaser hidden-xs" component="topic/teaser">
+	<div class="col-md-3 col-sm-3 teaser d-none d-sm-block" component="topic/teaser">
 		<!-- IMPORT partials/categories/lastpost.tpl -->
 	</div>
 	<!-- ENDIF !config.hideCategoryLastPost -->

package/templates/partials/categories/lastpost.tpl

@@ -1,11 +1,11 @@
-<div class="card background-link-container" style="border-color: {../bgColor}">
+<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, "sm", true)}</a>
-			<a class="permalink" href="{config.relative_path}/topic/{../topic.slug}<!-- IF ../index -->/{../index}<!-- ENDIF ../index -->">
+			<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>

package/templates/partials/categories/link.tpl

@@ -1,11 +1,11 @@
-<!-- IF ../isSection -->
-{../name}
-<!-- ELSE -->
-<!-- IF ../link -->
-<a href="{../link}" itemprop="url">
-<!-- ELSE -->
-<a href="{config.relative_path}/category/{../slug}" itemprop="url">
-<!-- ENDIF ../link -->
-{../name}
-</a>
+<!-- IF ../isSection -->
+{../name}
+<!-- ELSE -->
+<!-- IF ../link -->
+<a href="{../link}" itemprop="url">
+<!-- ELSE -->
+<a href="{config.relative_path}/category/{../slug}" itemprop="url">
+<!-- ENDIF ../link -->
+{../name}
+</a>
 <!-- ENDIF ../isSection -->

package/templates/partials/category/sort.tpl

@@ -1,15 +1,15 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<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 class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:sort_by]]</span>
 		<span class="visible-xs-inline"><i class="fa fa-fw fa-sort"></i></span>
 		<span class="caret"></span>
 	</button>
 
-	<ul class="dropdown-menu pull-right">
-		<li><a href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
-		<li><a href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
-		<li><a href="#" class="most_posts" data-sort="most_posts"><i class="fa fa-fw"></i> [[topic:most_posts]]</a></li>
-		<li><a href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
-		<li><a href="#" class="most_views" data-sort="most_views"><i class="fa fa-fw"></i> [[topic:most_views]]</a></li>
+	<ul class="dropdown-menu dropdown-menu-end">
+		<li><a class="dropdown-item" href="#" class="newest_to_oldest" data-sort="newest_to_oldest"><i class="fa fa-fw"></i> [[topic:newest_to_oldest]]</a></li>
+		<li><a class="dropdown-item" href="#" class="oldest_to_newest" data-sort="oldest_to_newest"><i class="fa fa-fw"></i> [[topic:oldest_to_newest]]</a></li>
+		<li><a class="dropdown-item" href="#" class="most_posts" data-sort="most_posts"><i class="fa fa-fw"></i> [[topic:most_posts]]</a></li>
+		<li><a class="dropdown-item" href="#" class="most_votes" data-sort="most_votes"><i class="fa fa-fw"></i> [[topic:most_votes]]</a></li>
+		<li><a class="dropdown-item" href="#" class="most_views" data-sort="most_views"><i class="fa fa-fw"></i> [[topic:most_views]]</a></li>
 	</ul>
 </div>

package/templates/partials/category/subcategory.tpl

@@ -1,18 +1,18 @@
 {{{ if children.length }}}
 <div class="subcategory">
 	{{{ if hasMoreSubCategories }}}
-	<div><!-- IMPORT partials/category-selector.tpl --></div>
+	<div class="mb-2"><!-- IMPORT partials/category-selector.tpl --></div>
 	{{{ else }}}
 	<p>[[category:subcategories]]</p>
 	{{{ end }}}
 
-	<ul component="category/subcategory/container" class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+	<ul component="category/subcategory/container" class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
 		{{{each children}}}
 		<!-- IMPORT partials/categories/item.tpl -->
 		{{{end}}}
 	</ul>
 	{{{ if hasMoreSubCategories}}}
-	<button class="btn btn-default" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
+	<button class="btn btn-outline-secondary mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
 	{{{ end }}}
 </div>
 {{{ end }}}

package/templates/partials/category/tags.tpl

@@ -1,5 +1,3 @@
-<!-- IF topics.tags.length -->
-	{{{each tags}}}
-		<a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}" style="<!-- IF topics.tags.color -->color: {topics.tags.color};<!-- ENDIF topics.tags.color --><!-- IF topics.tags.bgColor -->background-color: {topics.tags.bgColor};<!-- ENDIF topics.tags.bgColor -->">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
-	{{{end}}}
-<!-- ENDIF topics.tags.length -->
+{{{ each tags }}}
+<a href="{config.relative_path}/tags/{topics.tags.value}"><span class="tag-item" data-tag="{topics.tags.value}">{topics.tags.value}</span><span class="tag-topic-count human-readable-number" title="{topics.tags.score}">{topics.tags.score}</span></a>
+{{{ end }}}

package/templates/partials/category/tools.tpl

@@ -1,79 +1,79 @@
 <!-- IF showTopicTools -->
 <div class="btn-group thread-tools bottom-sheet">
-	<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 class="visible-sm-inline visible-md-inline visible-lg-inline">[[topic:thread_tools.title]]</span>
 		<span class="visible-xs-inline"><i class="fa fa-fw fa-gear"></i></span>
 		<span class="caret"></span>
 	</button>
-	<ul class="dropdown-menu pull-right">
+	<ul class="dropdown-menu dropdown-menu-end">
 		<li>
-			<a component="topic/mark-unread-for-all" href="#">
+			<a component="topic/mark-unread-for-all" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-inbox"></i> [[topic:thread_tools.markAsUnreadForAll]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/pin" href="#">
+			<a component="topic/pin" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-thumb-tack"></i> [[topic:thread_tools.pin]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unpin" href="#" class="hidden">
+			<a component="topic/unpin" href="#" class="hidden dropdown-item">
 				<i class="fa fa-fw fa-thumb-tack fa-rotate-90"></i> [[topic:thread_tools.unpin]]
 			</a>
 		</li>
 
 		<li>
-			<a component="topic/lock" href="#">
+			<a component="topic/lock" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-lock"></i> [[topic:thread_tools.lock]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/unlock" href="#" class="hidden">
+			<a component="topic/unlock" href="#" class="hidden dropdown-item" >
 				<i class="fa fa-fw fa-unlock"></i> [[topic:thread_tools.unlock]]
 			</a>
 		</li>
 
-		<li class="divider"></li>
+		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/move" href="#">
+			<a component="topic/move" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move]]
 			</a>
 		</li>
 		{{{if template.category}}}
 		<li>
-			<a component="topic/move-all" href="#">
+			<a component="topic/move-all" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-arrows"></i> [[topic:thread_tools.move_all]]
 			</a>
 		</li>
 		{{{end}}}
 		<li>
-			<a component="topic/merge" href="#">
+			<a component="topic/merge" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-code-fork"></i> [[topic:thread_tools.merge]]
 			</a>
 		</li>
 
-		<li class="divider"></li>
+		<li class="dropdown-divider"></li>
 
 		<li>
-			<a component="topic/delete" href="#">
+			<a component="topic/delete" href="#" class="dropdown-item">
 				<i class="fa fa-fw fa-trash-o"></i> [[topic:thread_tools.delete]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/restore" href="#" class="hidden">
+			<a component="topic/restore" href="#" class="hidden dropdown-item">
 				<i class="fa fa-fw fa-history"></i> [[topic:thread_tools.restore]]
 			</a>
 		</li>
 		<li>
-			<a component="topic/purge" href="#" class="hidden">
+			<a component="topic/purge" href="#" class="hidden dropdown-item">
 				<i class="fa fa-fw fa-eraser"></i> [[topic:thread_tools.purge]]
 			</a>
 		</li>
 
 		{{{each thread_tools}}}
 		<li>
-			<a href="#" class="{thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
+			<a href="#" class="dropdown-item {thread_tools.class}"><i class="fa fa-fw {thread_tools.icon}"></i> {thread_tools.title}</a>
 		</li>
 		{{{end}}}
 	</ul>

package/templates/partials/category/watch.tpl

@@ -1,23 +1,21 @@
 <!-- IF config.loggedIn -->
 <div class="btn-group topic-watch-dropdown bottom-sheet" component="topic/watch">
 
-	<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 component="category/watching/menu" <!-- IF !../isWatched -->class="hidden"<!-- ENDIF !../isWatched -->><i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:watching]]</span></span>
 
-		<span component="category/watching/menu" <!-- IF !../isWatched -->class="hidden"<!-- ENDIF !../isWatched -->><i class="fa fa-fw fa-inbox"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:watching]]</span></span>
-
-		<span component="category/notwatching/menu" <!-- IF !../isNotWatched -->class="hidden"<!-- ENDIF !../isNotWatched -->><i class="fa fa-fw fa-clock-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:not-watching]]</span></span>
-
-		<span component="category/ignoring/menu" <!-- IF !../isIgnored -->class="hidden"<!-- ENDIF !../isIgnored -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline">[[category:ignoring]]</span></span>
+		<span component="category/notwatching/menu" <!-- IF !../isNotWatched -->class="hidden"<!-- ENDIF !../isNotWatched -->><i class="fa fa-fw fa-clock-o"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:not-watching]]</span></span>
 
+		<span component="category/ignoring/menu" <!-- IF !../isIgnored -->class="hidden"<!-- ENDIF !../isIgnored -->><i class="fa fa-fw fa-eye-slash"></i><span class="visible-sm-inline visible-md-inline visible-lg-inline"> [[category:ignoring]]</span></span>
 		<span class="caret"></span>
 	</button>
 
-	<ul class="dropdown-menu dropdown-menu-right">
-		<li><a href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw <!-- IF ../isWatched -->fa-check<!-- ENDIF ../isWatched -->"></i><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
+	<ul class="dropdown-menu dropdown-menu-end">
+		<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i component="category/watching/check" class="fa fa-fw <!-- IF ../isWatched -->fa-check<!-- ENDIF ../isWatched -->"></i><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 component="category/notwatching/check" class="fa fa-fw <!-- IF ../isNotWatched -->fa-check<!-- ENDIF ../isNotWatched -->"></i><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/notwatching" data-state="notwatching"><i component="category/notwatching/check" class="fa fa-fw <!-- IF ../isNotWatched -->fa-check<!-- ENDIF ../isNotWatched -->"></i><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 component="category/ignoring/check" class="fa fa-fw <!-- IF ../isIgnored -->fa-check<!-- ENDIF ../isIgnored -->"></i><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/ignoring" data-state="ignoring"><i component="category/ignoring/check" class="fa fa-fw <!-- IF ../isIgnored -->fa-check<!-- ENDIF ../isIgnored -->"></i><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>
 <!-- ENDIF config.loggedIn -->

package/templates/partials/category-filter-content.tpl

@@ -1,17 +1,29 @@
-<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-    {{{ if selectedCategory }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>{{{ else }}}
+<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+    {{{ if selectedCategory }}}
+    <span class="category-item">
+        {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
+        <span class="visible-sm-inline visible-md-inline visible-lg-inline">{selectedCategory.name}</span>
+    </span>
+    {{{ else }}}
     <span class="visible-sm-inline visible-md-inline visible-lg-inline">[[unread:all_categories]]</span><span class="visible-xs-inline"><i class="fa fa-fw fa-list"></i></span>{{{ end }}} <span class="caret"></span>
 </button>
-<div component="category-selector-search" class="hidden">
+<div component="category-selector-search" class="hidden position-absolute">
     <input type="text" class="form-control" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
     <li role="presentation" class="category" data-all="all">
-        <a role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
+        <a class="dropdown-item" role="menu-item" href="{config.relative_path}/{allCategoriesUrl}"><i component="category/select/icon" class="fa fa-fw fa-check {{{if selectedCategory}}}invisible{{{end}}}"></i> [[unread:all_categories]]</a>
     </li>
     {{{each categoryItems}}}
     <li role="presentation" class="category {{{ if ../disabledClass }}}disabled{{{ end }}}" data-cid="{../cid}" data-parent-cid="{../parentCid}" data-name="{../name}">
-        <a role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i><span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ../icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i class="fa fa-fw fa-stack-1x {../icon}" style="color: {../color};"></i></span>{{{ end }}} {../name}</span></a>
+        <a class="dropdown-item" role="menu-item" href="#">{../level}<i component="category/select/icon" class="fa fa-fw fa-check {{{ if !../selected }}}invisible{{{ end }}}"></i>
+            <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+                <div class="category-item d-inline-block">
+                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {./name}
+                </div>
+            </span>
+        </a>
     </li>
     {{{end}}}
 </ul>

package/templates/partials/category-filter-right.tpl

@@ -1,3 +1,3 @@
-<div component="category/dropdown" class="btn-group pull-right category-dropdown-container bottom-sheet">
+<div component="category/dropdown" class="btn-group right category-dropdown-container bottom-sheet">
    <!-- IMPORT partials/category-filter-content.tpl -->
 </div>

package/templates/partials/category-selector-content.tpl

@@ -1,9 +1,15 @@
-<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-    <span component="category-selector-selected">{{{ if (selectedCategory && !showCategorySelectLabel) }}}<span class="fa-stack" style="{function.generateCategoryBackground, selectedCategory}"><i class="fa fa-fw fa-stack-1x {selectedCategory.icon}" style="color: {selectedCategory.color};"></i></span> {selectedCategory.name}{{{ else }}}
+<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
+    <span component="category-selector-selected">
+        {{{ if (selectedCategory && !showCategorySelectLabel) }}}
+        <span class="category-item">
+            {buildCategoryIcon(selectedCategory, "24px", "rounded-circle")}
+            {selectedCategory.name}
+        </span>
+        {{{ else }}}
     <span class="visible-sm-inline visible-md-inline visible-lg-inline">{{{ if selectCategoryLabel }}}{selectCategoryLabel}{{{ else }}}[[topic:thread_tools.select_category]]{{{ end }}}</span><span class="visible-xs-inline"><i class="fa fa-fw {{{ if selectCategoryIcon }}}{selectCategoryIcon}{{{ else }}}fa-list{{{ end }}}"></i></span>
     {{{ end }}}</span> <span class="caret"></span>
 </button>
-<div component="category-selector-search" class="hidden">
+<div component="category-selector-search" class="hidden position-absolute">
     <input type="text" class="form-control" autocomplete="off">
 </div>
 <ul component="category/list" class="dropdown-menu category-dropdown-menu" role="menu">
@@ -12,7 +18,14 @@
     </li>
     {{{each categoryItems}}}
     <li role="presentation" class="category {{{ if ../disabledClass }}}disabled {{{ end }}}" data-cid="{../cid}" data-name="{../name}" data-parent-cid="{../parentCid}">
-        <a role="menu-item">{../level}<span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">{{{ if ./icon }}}<span class="fa-stack" style="{function.generateCategoryBackground}"><i style="color: {../color};" class="fa fa-stack-1x fa-fw {../icon}"></i></span>{{{ end }}} {../name}</span></a>
+        <a class="dropdown-item" role="menu-item">{../level}
+            <span component="category-markup" style="{{{ if ../match }}}font-weight: bold;{{{end}}}">
+                <div class="category-item d-inline-block">
+                    {buildCategoryIcon(@value, "24px", "rounded-circle")}
+                    {./name}
+                </div>
+            </span>
+        </a>
     </li>
     {{{ end }}}
 </ul>

package/templates/partials/category-selector-right.tpl

@@ -1,3 +1,3 @@
-<div component="category-selector" class="btn-group bottom-sheet pull-right">
+<div component="category-selector" class="btn-group right category-dropdown-container bottom-sheet">
 <!-- IMPORT partials/category-selector-content.tpl -->
 </div>

package/templates/partials/chats/message-window.tpl

@@ -1,18 +1,20 @@
 <!-- IF roomId -->
 <div component="chat/messages" class="expanded-chat" data-roomid="{roomId}">
-	<div component="chat/header">
-		<button type="button" class="close" aria-label="Close" data-action="close"><span aria-hidden="true">&times;</span></button>
-		<button type="button" class="close" data-action="pop-out"><span aria-hidden="true"><i class="fa fa-compress"></i></span><span class="sr-only">[[modules:chat.pop-out]]</span></button>
-
-		<!-- IMPORT partials/chats/options.tpl -->
-		<span class="members">
+	<div component="chat/header" class="d-flex align-items-center px-3">
+		<span class="members flex-grow-1">
 			[[modules:chat.chatting_with]]:
 			{{{each users}}}
 			<a href="{config.relative_path}/uid/{../uid}">{../username}</a><!-- IF !@last -->,<!-- END -->
 			{{{end}}}
 		</span>
+
+		<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted" data-action="pop-out" aria-hidden="true" aria-label="Pop Out"><i class="fa fa-compress"></i></button>
+		<!-- IMPORT partials/chats/options.tpl -->
+		<button type="button" class="btn-close" aria-hidden="true" aria-label="Close" data-action="close"></button>
+	</div>
+	<div class="position-relative">
+		<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button">[[modules:chat.scroll-up-alert]]</div>
 	</div>
-	<div component="chat/messages/scroll-up-alert" class="scroll-up-alert alert alert-info" role="button">[[modules:chat.scroll-up-alert]]</div>
 	<ul class="chat-content">
 		<!-- IMPORT partials/chats/messages.tpl -->
 	</ul>
@@ -26,7 +28,7 @@
 	</div>
 </div>
 <!-- ELSE -->
-<div class="alert alert-info">
+<div class="alert alert-info me-3">
 	[[modules:chat.no-messages]]
 </div>
 <!-- ENDIF roomId -->

package/templates/partials/chats/message.tpl

@@ -1,16 +1,16 @@
-<li component="chat/message" class="chat-message clear<!-- IF ../deleted --> deleted<!-- END -->" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
+<li component="chat/message" class="chat-message mx-2 pe-2 fw-light clear<!-- IF ../deleted --> deleted<!-- END -->" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="{messages.newSet}" data-timestamp="{messages.timestamp}">
 	<div class="message-header">
-		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">{buildAvatar(messages.fromUser, "md", true, "not-responsive")}</a>
-		<strong><span class="chat-user"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span></strong>
+		<a href="{config.relative_path}/user/{messages.fromUser.userslug}">{buildAvatar(messages.fromUser, "32px", true, "not-responsive")}</a>
+		<span class="chat-user fw-bold"><a href="{config.relative_path}/user/{messages.fromUser.userslug}">{messages.fromUser.displayname}</a></span>
 		<!-- IF ../fromUser.banned -->
-		<span class="label label-danger">[[user:banned]]</span>
+		<span class="badge bg-danger">[[user:banned]]</span>
 		<!-- END -->
 		<!-- IF ../fromUser.deleted -->
-		<span class="label label-danger">[[user:deleted]]</span>
+		<span class="badge bg-danger">[[user:deleted]]</span>
 		<!-- END -->
-		<span class="chat-timestamp timeago" title="{messages.timestampISO}"></span>
+		<small class="chat-timestamp text-muted ms-2 timeago" title="{messages.timestampISO}"></small>
 		<!-- IF messages.edited -->
-		<div class="text-muted pull-right" title="[[global:edited]] {messages.editedISO}"><i class="fa fa-edit"></i></span></div>
+		<div class="text-muted float-end" title="[[global:edited]] {messages.editedISO}"><i class="fa fa-edit"></i></span></div>
 		<!-- ENDIF messages.edited -->
 	</div>
 	<div class="message-body-wrapper">
@@ -21,11 +21,11 @@
 		<!-- IF !config.disableChatMessageEditing -->
 		<!-- IF messages.self -->
 		<div class="btn-group controls">
-			<button class="btn btn-xs btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>
-			<button class="btn btn-xs btn-link" data-action="delete"><i class="fa fa-times"></i></button>
-			<button class="btn btn-xs btn-link" data-action="restore"><i class="fa fa-repeat"></i></button>
+			<button class="btn btn-sm btn-link" data-action="edit"><i class="fa fa-pencil"></i></button>
+			<button class="btn btn-sm btn-link" data-action="delete"><i class="fa fa-times"></i></button>
+			<button class="btn btn-sm btn-link" data-action="restore"><i class="fa fa-repeat"></i></button>
 			<!-- IF isAdminOrGlobalMod -->
-			<button class="btn btn-xs btn-link chat-ip" title="[[modules:chat.show-ip]]"><i class="fa fa-info-circle chat-ip-button"></i></button>
+			<button class="btn btn-sm btn-link chat-ip" title="[[modules:chat.show-ip]]"><i class="fa fa-info-circle chat-ip-button"></i></button>
 			<!-- ENDIF isAdminOrGlobalMod -->
 		</div>
 		<!-- ENDIF messages.self -->

package/templates/partials/chats/options.tpl

@@ -1,22 +1,22 @@
-<div class="dropdown pull-right">
-  <button class="close" data-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
-  <ul class="dropdown-menu dropdown-menu-right pull-right" component="chat/controls">
+<div class="dropdown">
+  <button class="btn btn-link p-2 text-muted align-text-top" data-bs-toggle="dropdown" component="chat/controlsToggle"><i class="fa fa-gear"></i></button>
+  <ul class="dropdown-menu dropdown-menu-end" component="chat/controls">
     <li class="dropdown-header">[[modules:chat.options]]</li>
     <li>
-      <a href="#" data-action="members"><i class="fa fa-fw fa-cog"></i> [[modules:chat.manage-room]]</a>
+      <a class="dropdown-item" href="#" data-action="members"><i class="fa fa-fw fa-cog"></i> [[modules:chat.manage-room]]</a>
     </li>
     <li>
-      <a href="#" data-action="rename"><i class="fa fa-fw fa-edit"></i> [[modules:chat.rename-room]]</a>
+      <a class="dropdown-item" href="#" data-action="rename"><i class="fa fa-fw fa-edit"></i> [[modules:chat.rename-room]]</a>
     </li>
     <li>
-      <a href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
+      <a class="dropdown-item" href="#" data-action="leave"><i class="fa fa-fw fa-sign-out"></i> [[modules:chat.leave]]</a>
     </li>
     <!-- IF users.length -->
-    <li role="separator" class="divider"></li>
+    <li role="separator" class="dropdown-divider"></li>
     <li class="dropdown-header">[[modules:chat.in-room]]</li>
     {{{each users}}}
     <li>
-      <a href="{config.relative_path}/uid/{../uid}">{buildAvatar(users, "sm", true)} {../username}</a>
+      <a class="dropdown-item" href="{config.relative_path}/uid/{../uid}">{buildAvatar(users, "24px", true)} {../username}</a>
     </li>
     {{{end}}}
     <!-- END -->

package/templates/partials/chats/recent_room.tpl

@@ -1,7 +1,7 @@
 <li component="chat/recent/room" data-roomid="{rooms.roomId}" class="<!-- IF rooms.unread -->unread<!-- ENDIF rooms.unread -->">
 	{{{each rooms.users}}}
 	<!-- IF @first -->
-	<div class="main-avatar">
+	<div class="main-avatar me-2">
 		<!-- IMPORT partials/chats/user.tpl -->
 	</div>
 	<!-- ENDIF @first -->

package/templates/partials/chats/system-message.tpl

@@ -1,3 +1,3 @@
-<li component="chat/system-message" class="system-message clear" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="0" data-timestamp="{messages.timestamp}">
+<li component="chat/system-message" class="system-message fs-6 py-3 clear" data-index="{messages.index}" data-mid="{messages.messageId}" data-uid="{messages.fromuid}" data-self="{messages.self}" data-break="0" data-timestamp="{messages.timestamp}">
 	[[modules:chat.system.{messages.content}, {messages.fromUser.username}]]
 </li>

package/templates/partials/chats/user.tpl

@@ -1 +1 @@
-<a href="{config.relative_path}/user/{rooms.users.userslug}">{buildAvatar(rooms.users, "sm", true)}</a>
+<a href="{config.relative_path}/user/{rooms.users.userslug}">{buildAvatar(rooms.users, "28px", true)}</a>

package/templates/partials/chats-menu.tpl

@@ -1,36 +1,36 @@
 {{{ if config.loggedIn }}}
 <ul class="nav nav-pills">
-	<li>
-		<a href="#notifications" data-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
+	<li class="nav-item">
+		<a class="nav-link" href="#notifications" data-bs-toggle="tab"><span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span> <i class="fa fa-fw fa-bell"></i></a>
 	</li>
 	{{{ if !config.disableChat }}}
-	<li>
-		<a href="#chats" data-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
+	<li class="nav-item">
+		<a class="nav-link" href="#chats" data-bs-toggle="tab"><i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i> <i class="fa fa-fw fa-comment"></i></a>
 	</li>
 	{{{ end }}}
-	<li class="active">
-		<a href="#profile" data-toggle="tab">
-			{buildAvatar(user, "sm", true, "user-icon")}
+	<li class="nav-item">
+		<a class="nav-link active" href="#profile" data-bs-toggle="tab">
+			{buildAvatar(user, "24px", true, "user-icon")}
 			<i component="user/status" class="fa fa-fw fa-circle status {user.status}"></i>
 		</a>
 	</li>
 </ul>
 
 <div class="tab-content">
-	<div class="tab-pane fade active in" id="profile">
+	<div class="tab-pane fade show active" id="profile">
 		<section class="menu-section" data-section="profile">
-			<ul class="menu-section-list" component="header/usercontrol"></ul>
+			<ul class="menu-section-list dropdown-menu show text-bg-dark w-100 border-0" component="header/usercontrol"></ul>
 		</section>
 	</div>
 	<div class="tab-pane fade" id="notifications">
-		<section class="menu-section" data-section="notifications">
+		<section class="menu-section text-bg-dark" data-section="notifications">
 			<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
 			<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
 		</section>
 	</div>
 	{{{ if !config.disableChat }}}
 	<div class="tab-pane fade" id="chats">
-		<section class="menu-section" data-section="chats">
+		<section class="menu-section text-bg-dark" data-section="chats">
 			<ul class="menu-section-list chat-list" component="chat/list">
 				<a class="navigation-link" href="{relative_path}/user/{user.userslug}/chats">[[modules:chat.see_all]]</a>
 			</ul>

package/templates/partials/cookie-consent.tpl

@@ -1,4 +1,4 @@
 <div class="cookie-consent">
-    <button class="pull-right btn btn-primary">{dismiss}</button>
+    <button class="float-end btn btn-primary">{dismiss}</button>
     {message} <a target="_blank" rel="noopener" href="{link_url}">{link}</a>
 </div>