nodebb-theme-harmony 2.0.0-pre.33 → 2.0.0-pre.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "2.0.0-pre.33",
+  "version": "2.0.0-pre.35",
   "nbbpm": {
     "compatibility": "^3.7.0"
   },

package/scss/common.scss

@@ -90,13 +90,6 @@ body:not(.page-user) {
 	background-color: initial;
 }
 
-.btn-link {
-	&:hover, &.active {
-		background-color: var(--btn-ghost-hover-color);
-		text-decoration: none;
-	}
-}
-
 .flex-basis-md-200 {
 	@include media-breakpoint-up(md) {
 		flex-basis: 200px!important;

package/templates/account/categories.tpl

@@ -7,7 +7,7 @@
 
 	<div class="d-flex gap-1">
 		<div class="btn-group bottom-sheet" component="category/watch/all">
-			<button class="btn-ghost-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
+			<button class="btn btn-ghost btn-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">
 				<span>[[user:change-all]]</span>
 			</button>
 			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end" role="menu">

package/templates/account/edit.tpl

@@ -37,11 +37,11 @@
 					<div component="group/badge/item" class="d-flex gap-2 justify-content-between align-items-center" data-value="{./displayName}" data-selected="{./selected}">
 						<!-- IMPORT partials/groups/badge.tpl -->
 						<div class="d-flex gap-1">
-							<button component="group/toggle/hide" type="button" class="btn-ghost-sm {{{ if !./selected }}}hidden{{{ end }}}" title="[[user:hide-group-title]]"><i class="fa fa-fw fa-eye"></i></button>
-							<button component="group/toggle/show" type="button" class="btn-ghost-sm {{{ if ./selected }}}hidden{{{ end }}}" title="[[user:show-group-title]]"><i class="fa fa-fw fa-eye-slash"></i></button>
+							<button component="group/toggle/hide" type="button" class="btn btn-ghost btn-sm {{{ if !./selected }}}hidden{{{ end }}}" title="[[user:hide-group-title]]"><i class="fa fa-fw fa-eye"></i></button>
+							<button component="group/toggle/show" type="button" class="btn btn-ghost btn-sm {{{ if ./selected }}}hidden{{{ end }}}" title="[[user:show-group-title]]"><i class="fa fa-fw fa-eye-slash"></i></button>
 							{{{ if allowMultipleBadges }}}
-							<button component="group/order/up" type="button" class="btn-ghost-sm" title="[[user:order-group-up]]"><i class="fa fa-fw fa-chevron-up"></i></button>
-							<button component="group/order/down" type="button" class="btn-ghost-sm" title="[[user:order-group-down]]"><i class="fa fa-fw fa-chevron-down"></i></button>
+							<button component="group/order/up" type="button" class="btn btn-ghost btn-sm" title="[[user:order-group-up]]"><i class="fa fa-fw fa-chevron-up"></i></button>
+							<button component="group/order/down" type="button" class="btn btn-ghost btn-sm" title="[[user:order-group-down]]"><i class="fa fa-fw fa-chevron-down"></i></button>
 							{{{ end }}}
 						</div>
 					</div>

package/templates/account/posts.tpl

@@ -3,19 +3,19 @@
 <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
 	<h3 class="fw-semibold fs-5 mb-0">[[global:posts]]</h3>
 	<div class="d-flex flex-wrap gap-1">
-		<a href="{config.relative_path}/user/{userslug}/posts" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<a href="{config.relative_path}/user/{userslug}/posts" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
 		{{{ if !reputation:disabled }}}
-		<a href="{config.relative_path}/user/{userslug}/best"class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>
-		<a href="{config.relative_path}/user/{userslug}/controversial" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/controversial }}}active{{{ end }}}">[[global:controversial]]</a>
+		<a href="{config.relative_path}/user/{userslug}/best"class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>
+		<a href="{config.relative_path}/user/{userslug}/controversial" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/controversial }}}active{{{ end }}}">[[global:controversial]]</a>
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
+		<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
 		{{{ if !downvote:disabled }}}
-		<a href="{config.relative_path}/user/{userslug}/downvoted" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/downvoted }}}active{{{ end }}}">[[global:downvoted]]</a>
+		<a href="{config.relative_path}/user/{userslug}/downvoted" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/downvoted }}}active{{{ end }}}">[[global:downvoted]]</a>
 		{{{ end }}}
 		{{{ end }}}
 		{{{ end }}}
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/bookmarks" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/bookmarks }}}active{{{ end }}}">[[user:bookmarks]]</a>
+		<a href="{config.relative_path}/user/{userslug}/bookmarks" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/bookmarks }}}active{{{ end }}}">[[user:bookmarks]]</a>
 		{{{ end }}}
 	</div>
 </div>

package/templates/account/topics.tpl

@@ -2,10 +2,10 @@
 
 <div class="d-flex justify-content-between align-items-center mb-3">
 	<div class="d-flex gap-1">
-		<h3 class="fw-semibold fs-5 mb-0">[[global:topics]]</h3>
+		<h3 class="fw-semibold fs-5 mb-0 align-self-center">[[global:topics]]</h3>
 		{{{ if showSort }}}
 		<div class="btn-group bottom-sheet" component="thread/sort">
-			<button title="[[global:sort]]" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
+			<button title="[[global:sort]]" class="btn btn-ghost btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button"><i class="fa-solid fa-arrow-up-wide-short"></i></button>
 			<ul class="dropdown-menu p-1 text-sm" role="menu">
 				{{{each sortOptions }}}
 				<li>
@@ -22,9 +22,9 @@
 
 	<div class="d-flex gap-1">
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
-		<a href="{config.relative_path}/user/{userslug}/watched"class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
-		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn-ghost-sm ff-secondary fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<a href="{config.relative_path}/user/{userslug}/watched"class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
+		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
 		{{{ end }}}
 	</div>
 </div>

package/templates/admin/plugins/harmony.tpl

@@ -11,6 +11,7 @@
 				<div class="form-check form-switch">
 					<input type="checkbox" class="form-check-input" id="enableBreadcrumbs" name="enableBreadcrumbs" />
 					<label for="enableBreadcrumbs" class="form-check-label">[[themes/harmony:settings.enableBreadcrumbs]]</label>
+					<p class="form-text">[[themes/harmony:settings.enableBreadcrumbs.why]]</p>
 				</div>
 				<div class="form-check form-switch">
 					<input type="checkbox" class="form-check-input" id="centerHeaderElements" name="centerHeaderElements" />

package/templates/flags/detail.tpl

@@ -3,14 +3,14 @@
 <div class="d-flex flex-column flex-md-row">
 	<div class="flex-shrink-0 d-flex flex-column gap-3 border-end-md text-sm mb-3 pe-4" style="flex-basis: 240px !important;">
 		<div class="d-grid gap-1">
-			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{encodeURIComponent(targetId)}">
+			<a class="btn btn-ghost btn-sm ff-secondary border d-flex gap-2 align-items-center" href="{config.relative_path}/{type_path}/{encodeURIComponent(targetId)}">
 				<i class="fa fa-fw fa-external-link text-primary"></i>
 				[[flags:go-to-target]]
 			</a>
 
 			{{{ if target.uid }}}
 			<div class="btn-group dropend" data-uid="{target.uid}">
-				<button type="button" class="btn btn-ghost ff-secondary border btn-sm justify-content-start dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+				<button type="button" class="btn btn-ghost btn-sm ff-secondary border d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 					<i class="fa fa-fw fa-street-view text-primary"></i>
 					[[flags:flagged-user]]
 					<i class="fa fa-chevron-right ms-auto text-secondary"></i>
@@ -38,7 +38,7 @@
 			</div>
 			{{{ end }}}
 
-			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="#" data-action="assign">
+			<a class="btn btn-ghost btn-sm ff-secondary border d-flex gap-2 align-items-center" href="#" data-action="assign">
 				<i class="fa fa-fw fa-id-card-o text-primary"></i>
 				[[flags:assign-to-me]]
 			</a>

package/templates/groups/list.tpl

@@ -10,9 +10,9 @@
 			<div class="text-sm d-flex flex-wrap align-items-center gap-2">
 				[[topic:sort-by]]
 				<div class="d-flex gap-2">
-					<a href="?sort=alpha" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
-					<a href="?sort=count" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
-					<a href="?sort=date" class="btn-ghost ff-secondary fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
+					<a href="?sort=alpha" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
+					<a href="?sort=count" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
+					<a href="?sort=date" class="btn btn-ghost btn-sm ff-secondary fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
 				</div>
 			</div>
 		</div>

package/templates/notifications.tpl

@@ -12,7 +12,7 @@
 				{{{ if ./separator }}}
 				<hr/>
 				{{{ else }}}
-				<a class="btn-ghost ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
+				<a class="btn btn-ghost d-flex gap-2 text-start text-sm ff-secondary fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
 					<div class="flex-grow-1">{filters.name}</div>
 					<span class="flex-shrink-0 text-xs" title="{./count}">{humanReadableNumber(./count)}</span>
 				</a>

package/templates/partials/account/sidebar-left.tpl

@@ -1,9 +1,9 @@
 <div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 	<div class="sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem;z-index: 1;">
-		<a href="{config.relative_path}/user/{userslug}" class="btn-ghost ff-secondary fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
+		<a href="{config.relative_path}/user/{userslug}" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:about]]</div>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/posts"class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/posts"class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/posts }}}active{{{ end }}}
 			{{{ if template.account/best }}}active{{{ end }}}
 			{{{ if template.account/controversial }}}active{{{ end }}}
@@ -13,52 +13,52 @@
 			<div class="flex-grow-1">[[global:posts]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.posts}">{humanReadableNumber(counts.posts)}</span>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/topics }}}active{{{ end }}}
 			{{{ if template.account/watched }}}active{{{ end }}}
 			{{{ if template.account/ignored }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:topics]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.topics}">{humanReadableNumber(counts.topics)}</span>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/groups" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/groups }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:header.groups]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.groups}">{humanReadableNumber(counts.groups)}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/followers" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/followers }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:followers]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.followers}">{humanReadableNumber(counts.followers)}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/following" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/following }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:following]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.following}">{humanReadableNumber(counts.following)}</span>
 		</a>
 
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/categories" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/categories" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/categories }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:watched-categories]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.categoriesWatched}">{counts.categoriesWatched}</span>
 		</a>
 		{{{ if isSelf }}}
-		<a href="{config.relative_path}/user/{userslug}/tags" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/tags" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/tags }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:watched-tags]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.tagsWatched}">{counts.tagsWatched}</span>
 		</a>
 		{{{ end }}}
 
-		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/blocks }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:blocked-users]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.blocks}">{humanReadableNumber(counts.blocks)}</span>
 		</a>
 
-		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost ff-secondary fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn btn-ghost btn-sm text-start ff-secondary fw-semibold d-flex gap-2 align-items-center
 			{{{ if template.account/uploads }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:uploads]]</div>
 			<span class="flex-shrink-0 text-xs" title="{counts.uploaded}">{humanReadableNumber(counts.uploaded)}</span>
@@ -67,19 +67,20 @@
 
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<hr class="w-100 my-2"/>
-		<a {{{if flagId }}}hidden{{{end}}} href="#" component="account/flag" class="btn-ghost-sm ff-secondary">
+
+		<a {{{if flagId }}}hidden{{{end}}} href="#" component="account/flag" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start">
 			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:flag-profile]]</div>
 		</a>
-		<a {{{if !flagId }}}hidden{{{end}}} href="#" component="account/already-flagged" class="btn-ghost-sm ff-secondary" data-flag-id="{flagId}">
+		<a {{{if !flagId }}}hidden{{{end}}} href="#" component="account/already-flagged" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start" data-flag-id="{flagId}">
 			<i class="flex-shrink-0 fa-solid fa-flag text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:profile-flagged]]</div>
 		</a>
-		<a href="#" component="account/block" class="btn-ghost-sm ff-secondary {{{ if isBlocked }}}hidden{{{ end }}}">
+		<a href="#" component="account/block" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{ if isBlocked }}}hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:block-user]]</div>
 		</a>
-		<a href="#" component="account/unblock" class="btn-ghost-sm ff-secondary {{{ if !isBlocked }}}hidden{{{ end }}}">
+		<a href="#" component="account/unblock" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 text-start {{{ if !isBlocked }}}hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa-solid fa-ban text-danger"></i>
 			<div class="flex-grow-1 text-nowrap">[[user:unblock-user]]</div>
 		</a>
@@ -87,18 +88,18 @@
 
 		{{{ if canEdit }}}
 		<hr class="w-100 my-2"/>
-		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm ff-secondary text-xs
+		<a href="{config.relative_path}/user/{userslug}/edit" class="btn btn-ghost btn-sm ff-secondary text-xs text-start
 		{{{ if template.account/edit }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:edit-profile]]</div>
 		</a>
-		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm ff-secondary text-xs
+		<a href="{config.relative_path}/user/{userslug}/settings" class="btn btn-ghost btn-sm ff-secondary text-xs text-start
 			{{{ if template.account/settings }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[user:settings]]</div>
 		</a>
 		{{{ end }}}
 
 		{{{ each profile_links }}}
-		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn-ghost-sm ff-secondary text-xs plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
+		<a href="{config.relative_path}/user/{userslug}/{./route}" class="btn btn-ghost btn-sm ff-secondary text-xs text-start plugin-link {{{ if ./public }}}public{{{ else }}}private{{{ end }}} {{{ if (url == ./url) }}}active{{{ end }}}" id="{./id}">
 			<div class="flex-grow-1">{./name}</div>
 		</a>
 		{{{end}}}

package/templates/partials/category/subcategory.tpl

@@ -13,7 +13,7 @@
 		{{{end}}}
 	</ul>
 	{{{ if hasMoreSubCategories}}}
-	<button class="btn-ghost-sm ff-secondary mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
+	<button class="btn btn-ghost btn-sm ff-secondary mb-2" component="category/load-more-subcategories">[[category:x-more-categories, {subCategoriesLeft}]]</button>
 	{{{ end }}}
 </div>
 {{{ end }}}

package/templates/partials/groups/sidebar-left.tpl

@@ -1,25 +1,25 @@
 <div class="flex-shrink-0 pe-2 border-end-md text-sm mb-3 flex-basis-md-200">
 	<div class="nav sticky-md-top d-flex flex-row flex-md-column flex-wrap gap-1" style="top: 1rem; z-index: 1;">
-		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn-ghost ff-secondary fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
+		<button data-bs-toggle="tab" data-bs-target="#groups-posts" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold {{{ if template.groups/details }}}active{{{ end }}}">
 			<div class="flex-grow-1">[[global:posts]]</div>
 		</button>
-		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-members" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold">
 			<div class="flex-grow-1">[[groups:members]]</div>
 			<span component="group/member/count" class="flex-shrink-0 text-xs" title="{group.memberCount}">{humanReadableNumber(group.memberCount)}</span>
 		</button>
 
 		{{{ if group.isOwner }}}
-		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-pending" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold">
 			<div class="flex-grow-1">[[groups:details.pending]]</div>
 			<span component="group/pending/count" class="flex-shrink-0 text-xs" title="{group.pending.length}">{humanReadableNumber(group.pending.length)}</span>
 		</button>
 
-		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-invited" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold">
 			<div class="flex-grow-1">[[groups:details.invited]]</div>
 			<span component="group/invited/count" class="flex-shrink-0 text-xs" title="{group.invited.length}">{humanReadableNumber(group.invited.length)}</span>
 		</button>
 
-		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn-ghost ff-secondary fw-semibold">
+		<button data-bs-toggle="tab" data-bs-target="#groups-admin" class="btn btn-ghost btn-sm text-start d-flex align-items-center ff-secondary fw-semibold">
 			<div class="flex-grow-1">[[global:header.admin]]</div>
 		</button>
 		{{{ end }}}

package/templates/partials/notifications_list.tpl

@@ -8,7 +8,7 @@
 {{{ each notifications }}}
 <div class="{./readClass}" data-nid="{./nid}" data-path="{./path}" {{{ if ./pid }}}data-pid="{./pid}"{{{ end }}}{{{ if ./tid }}}data-tid="{./tid}"{{{ end }}}>
 	<div class="d-flex gap-1 justify-content-between">
-		<div class="btn-ghost-sm d-flex gap-2 flex-grow-1 align-items-start">
+		<div class="btn btn-ghost btn-sm d-flex gap-2 flex-grow-1 text-start align-items-start">
 			<a class="flex-grow-0 flex-shrink-0" href="{{{ if ./user.userslug}}}{config.relative_path}/user/{./user.userslug}{{{ else }}}#{{{ end }}}">
 				{{{ if (./image && ./from) }}}
 				<img class="avatar avatar-rounded" style="--avatar-size: 32px;" src="{./image}" />
@@ -30,7 +30,7 @@
 		</div>
 		<div>
 			{{{ if ./nid }}}
-			<button class="mark-read btn-ghost-sm flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
+			<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 				<i class="unread fa fa-2xs fa-circle text-primary {{{ if ./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-read]]"></i>
 				<i class="read fa fa-2xs fa-circle-o text-secondary {{{ if !./read }}}hidden{{{ end }}}" aria-label="[[unread:mark-as-unread]]"></i>
 			</button>

package/templates/partials/post_bar.tpl

@@ -3,7 +3,7 @@
 		<div class="d-flex flex-row p-2 text-bg-light border rounded w-100 align-items-center">
 			<div class="d-flex me-auto mb-0 gap-2 align-items-center flex-wrap">
 				{{{ if loggedIn }}}
-				<button component="topic/mark-unread" class="btn-ghost-sm ff-secondary d-flex gap-2 align-items-center">
+				<button component="topic/mark-unread" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center">
 					<i class="fa fa-fw fa-inbox text-primary"></i>
 					<span class="d-none d-md-inline fw-semibold">[[topic:mark-unread]]</span>
 				</button>
@@ -14,7 +14,7 @@
 				<!-- IMPORT partials/topic/tools.tpl -->
 
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
+				<a class="btn btn-ghost btn-sm d-none d-lg-flex align-items-center align-self-stretch" target="_blank" href="{rssFeedUrl}" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
 				{{{ end }}}
 
 				{{{ if browsingUsers }}}

package/templates/partials/quick-search-results.tpl

@@ -14,14 +14,14 @@
 	{{{ each posts }}}
 	<li data-tid="{posts.topic.tid}" data-pid="{posts.pid}" class="d-flex flex-column gap-1">
 		<a href="{config.relative_path}/post/{encodeURIComponent(posts.pid)}"
-			class="btn-ghost-sm ff-secondary rounded-1 text-reset d-block text-truncate px-2 py-1">
+			class="btn btn-ghost btn-sm ff-secondary rounded-1 text-start text-reset d-block text-truncate px-2 py-1">
 			<span class="quick-search-title fw-semibold text-sm">{posts.topic.title}</span>
 			<br/>
 			<p class="snippet text-xs text-break text-wrap mb-0">
 			{posts.snippet}
 			</p>
 		</a>
-		<div class="d-flex gap-1 post-info px-2 text-xs">
+		<div class="d-flex gap-2 post-info px-2 text-xs">
 			<div class="category-item d-inline-block ff-secondary">
 				{function.buildCategoryLabel, posts.category, "span"}
 			</div>

package/templates/partials/search-filters.tpl

@@ -176,7 +176,7 @@
 			<ul class="dropdown-menu p-1 text-sm" style="width: 300px;" role="menu">
 				<li class="px-3 py-1 d-flex flex-column gap-2">
 					<button id="save-preferences" class="btn btn-primary">[[search:save-preferences]]</button>
-					<button id="clear-preferences" class="btn-ghost border">[[search:clear-preferences]]</button>
+					<button id="clear-preferences" class="btn btn-ghost border">[[search:clear-preferences]]</button>
 				</li>
 			</ul>
 		</div>

package/templates/partials/sidebar/chats.tpl

@@ -24,7 +24,7 @@
 						</div>
 					</div>
 					<div>
-						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+						<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 							<i class="unread fa fa-2xs fa-circle text-primary"></i>
 						</button>
 					</div>

package/templates/partials/sidebar/notifications.tpl

@@ -31,7 +31,7 @@
 						</div>
 					</div>
 					<div>
-						<button class="mark-read btn-ghost-sm" style="width: 1.5rem; height: 1.5rem;">
+						<button class="mark-read btn btn-ghost btn-sm d-flex align-items-center justify-content-center flex-grow-0 flex-shrink-0 p-1" style="width: 1.5rem; height: 1.5rem;">
 							<i class="unread fa fa-2xs fa-circle text-primary"></i>
 						</button>
 					</div>

package/templates/partials/sidebar/search.tpl

@@ -10,8 +10,8 @@
 			<div class="d-flex gap-1">
 				<input autocomplete="off" type="text" class="form-control" placeholder="[[global:search]]" name="query" value="" aria-label="[[search:type-to-search]]">
 
-				<a class="btn-ghost advanced-search-link" href="{config.relative_path}/search" title="[[search:advanced-search]]">
-					<i class="fa fa-gears fa-fw text-muted"></i>
+				<a class="btn btn-ghost advanced-search-link p-2" href="{config.relative_path}/search" title="[[search:advanced-search]]">
+					<i class="fa fa-gears text-muted"></i>
 				</a>
 			</div>
 

package/templates/partials/tags_list.tpl

@@ -1,6 +1,6 @@
 {{{each tags}}}
-<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn-ghost ff-secondary flex-column gap-0 align-items-start justify-content-start text-truncate p-2 ff-base">
-	<div class="fw-semibold text-nowrap tag-item w-100 text-truncate">{./valueEscaped}</div>
+<a href="{config.relative_path}/tags/{./valueEncoded}" data-tag="{./valueEscaped}" class="btn btn-ghost ff-base d-flex flex-column gap-1 align-items-start justify-content-start text-truncate p-2">
+	<div class="fw-semibold text-nowrap tag-item w-100 text-start text-truncate">{./valueEscaped}</div>
 	<div class="text-xs text-muted text-nowrap tag-topic-count">[[global:x-topics, {formattedNumber(./score)}]]</div>
 </a>
 {{{end}}}

package/templates/partials/topic/navigator.tpl

@@ -2,7 +2,7 @@
 	<div class="d-flex justify-content-end sticky-top mt-4" style="top:6rem;z-index:1;">
 		<div class="ps-1 ps-md-0 d-inline-block">
 			<div class="scroller-content d-flex gap-2 flex-column align-items-start">
-				<button class="pagetop btn-ghost-sm ff-secondary d-inline-flex border-0" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
+				<button class="pagetop btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
 				<div class="scroller-container position-relative">
 					<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
 						<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
@@ -18,7 +18,7 @@
 						</div>
 					</div>
 				</div>
-				<button class="pagebottom btn-ghost-sm ff-secondary d-inline-flex border-0" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
+				<button class="pagebottom btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
 			</div>
 		</div>
 	</div>

package/templates/partials/topic/post-menu.tpl

@@ -1,4 +1,4 @@
 <span component="post/tools" class="dropdown bottom-sheet {{{ if !./display_post_menu }}}hidden{{{ end }}}">
-	<a class="btn-ghost-sm ff-secondary dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:post-tools]]"><i class="fa fa-fw fa-ellipsis-v text-primary"></i></a>
+	<a class="btn btn-ghost btn-sm ff-secondary dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:post-tools]]"><i class="fa fa-fw fa-ellipsis-v text-primary"></i></a>
 	<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu"></ul>
 </span>

package/templates/partials/topic/post.tpl

@@ -108,8 +108,8 @@
 
 	<div component="post/actions" class="d-flex justify-content-end gap-1 post-tools">
 		<!-- IMPORT partials/topic/reactions.tpl -->
-		<a component="post/reply" href="#" class="btn-ghost-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-fw fa-reply text-primary"></i></a>
-		<a component="post/quote" href="#" class="btn-ghost-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
+		<a component="post/reply" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:reply]]"><i class="fa fa-fw fa-reply text-primary"></i></a>
+		<a component="post/quote" href="#" class="btn btn-ghost btn-sm {{{ if !privileges.topics:reply }}}hidden{{{ end }}}" title="[[topic:quote]]"><i class="fa fa-fw fa-quote-right text-primary"></i></a>
 
 		{{{ if ./announces }}}
 		<a component="post/announce-count" href="#" class="btn-ghost-sm" title="[[activitypub:announcers]]"><i class="fa fa-share-alt text-primary"></i> {./announces}</a>
@@ -117,16 +117,16 @@
 
 		{{{ if !reputation:disabled }}}
 		<div class="d-flex votes align-items-center">
-			<a component="post/upvote" href="#" class="btn-ghost-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
+			<a component="post/upvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.upvoted }}} upvoted{{{ end }}}" title="[[topic:upvote-post]]">
 				<i class="fa fa-fw fa-chevron-up text-primary"></i>
 			</a>
 
 			<meta itemprop="upvoteCount" content="{posts.upvotes}">
 			<meta itemprop="downvoteCount" content="{posts.downvotes}">
-			<a href="#" class="px-2 mx-1 btn-ghost-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
+			<a href="#" class="px-2 mx-1 btn btn-ghost btn-sm" component="post/vote-count" data-votes="{posts.votes}" title="[[global:voters]]">{posts.votes}</a>
 
 			{{{ if !downvote:disabled }}}
-			<a component="post/downvote" href="#" class="btn-ghost-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
+			<a component="post/downvote" href="#" class="btn btn-ghost btn-sm{{{ if posts.downvoted }}} downvoted{{{ end }}}" title="[[topic:downvote-post]]">
 				<i class="fa fa-fw fa-chevron-down text-primary"></i>
 			</a>
 			{{{ end }}}

package/templates/partials/topic/quickreply.tpl

@@ -15,7 +15,7 @@
 		</div>
 		<div>
 			<div class="d-flex justify-content-end gap-2">
-				<button type="submit" component="topic/quickreply/expand" class="btn-ghost-sm border" title="[[topic:open-composer]]"><i class="fa fa-expand"></i></button>
+				<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>

package/templates/partials/topic/sort.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[aria:post-sort-option, {sortOptionLabel}]]">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">{sortOptionLabel}</span>
 	</button>

package/templates/partials/topic/tools.tpl

@@ -1,6 +1,6 @@
 {{{ if privileges.view_thread_tools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-gear text-primary"></i>
 		<span class="d-none d-md-inline fw-semibold">[[topic:thread-tools.title]]</span>
 	</button>

package/templates/partials/topic/watch.tpl

@@ -1,6 +1,6 @@
 {{{ if config.loggedIn }}}
 <div class="btn-group bottom-sheet" component="topic/watch">
-	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
+	<button class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button" aria-haspopup="true" aria-expanded="false">
 		<span component="topic/following/menu" class="d-flex gap-2 align-items-center{{{ if !isFollowing }}} hidden{{{ end }}}">
 			<i class="flex-shrink-0 fa fa-fw fa-bell-o text-primary"></i>
 			<span class="d-none d-md-inline fw-semibold">[[topic:watching]]</span>

package/templates/partials/topic-filters.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group bottom-sheet{{{ if !filters.length }}} hidden{{{ end }}}">
-	<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-filter text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedFilter.name}</span>
 	</button>

package/templates/partials/topic-list-bar.tpl

@@ -24,10 +24,10 @@
 				<!-- IMPORT partials/category/filter-dropdown-left.tpl -->
 				<!-- IMPORT partials/tags/watch.tpl -->
 				{{{ end }}}
-				<!-- IMPORT partials/category/tools.tpl -->
+				<!-- IMPORT partials/category/tools-dropdown-left.tpl -->
 
 				{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
-				<a class="btn-ghost-sm d-none d-lg-flex align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
+				<a class="btn btn-ghost btn-sm d-none d-lg-flex align-items-center align-self-stretch" target="_blank" href="{rssFeedUrl}" itemprop="item" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
 				{{{ end }}}
 
 				<a href="{{{ if (template.category || template.world) }}}{url}{{{ else }}}{config.relative_path}/{selectedFilter.url}{querystring}{{{ end }}}" class="btn btn-secondary fw-semibold position-absolute top-100 translate-middle-x start-50 mt-1 hide" style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;" id="new-topics-alert">

package/templates/partials/topic-terms.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group bottom-sheet {{{ if !terms.length }}}hidden{{{ end }}}">
-	<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+	<button type="button" class="btn btn-ghost btn-sm ff-secondary d-flex align-items-center gap-2 dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 		<i class="fa fa-fw fa-clock text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">{selectedTerm.name}</span>
 	</button>

package/templates/partials/users/item.tpl

@@ -1,6 +1,6 @@
-<a href="{config.relative_path}/user/{./userslug}" class="btn-ghost ff-secondary align-items-start justify-content-start p-2 ff-base">
+<a href="{config.relative_path}/user/{./userslug}" class="btn btn-ghost gap-2 ff-base d-flex align-items-start justify-content-start p-2 text-start">
 	{buildAvatar(@value, "48px", true, "flex-shrink-0")}
-	<div class="d-flex flex-column text-truncate">
+	<div class="d-flex flex-column gap-1 text-truncate">
 		<div class="fw-semibold text-truncate" title="{./displayname}">{./displayname}</div>
 		<div class="text-xs text-muted text-truncate">@{./username}</div>