nodebb-theme-harmony 1.1.108 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-theme-harmony",
-  "version": "1.1.108",
+  "version": "1.2.1",
   "nbbpm": {
     "compatibility": "^3.5.0"
   },

package/scss/chats.scss

@@ -1,28 +1,5 @@
-// chats need a bit of css
-
-.stacked-avatars {
-	width: 32px;
-	height: 32px;
-	span:first-child {
-		top: 0;
-		left: 8px;
-	}
-	span:last-child {
-		left: 0;
-		top: 8px;
-	}
-}
-
+// themes have a different layout so each one needs this block to set height to 100%
 body.page-user-chats {
-	#content {
-		max-width: 100%;
-		margin-bottom: 0!important;
-	}
-	overflow: hidden;
-	[data-widget-area="footer"] {
-		display: none;
-	}
-	height: 100%;
 	> .layout-container {
 		height: 100%;
 		> #panel {
@@ -32,105 +9,4 @@ body.page-user-chats {
 			}
 		}
 	}
-}
-
-[component="chat/recent"] {
-	.active .chat-room-btn {
-		background-color: var(--btn-ghost-hover-color);
-	}
-}
-
-[component="chat/nav-wrapper"] {
-	width: 300px;
-	[component="chat/public/room"].unread {
-		font-weight: $font-weight-bold;
-	}
-}
-
-[component="chat/user/list"] [data-uid] {
-	[component="chat/user/list/username"] {
-		color: $text-muted;
-	}
-	&.online {
-		[component="chat/user/list/username"] {
-			color: initial;
-			font-weight: $font-weight-semibold;
-		}
-	}
-}
-
-.expanded-chat {
-	.chat-content {
-		.message-body {
-			@include fix-lists;
-		}
-
-		.chat-message {
-			.message-body-wrapper {
-				.controls {
-					opacity: 0;
-					transition: $transition-fade;
-					&:has([aria-expanded="true"]) { opacity: 1; }
-					[data-action="restore"], [data-action="unpin"] { display: none; }
-				}
-				&:hover {
-					.controls { opacity: 1;	}
-				}
-			}
-			&.deleted {
-				.message-body { opacity: 0.3; }
-				.message-body-wrapper .controls {
-					[data-action] { display: none; }
-					[data-action="restore"] { display: block; }
-				}
-			}
-			&.pinned {
-				.message-body-wrapper .controls {
-					[data-action="pin"] { display: none; }
-					[data-action="unpin"] { display: block;}
-				}
-			}
-		}
-	}
-}
-
-/* Mobile handling of chat page */
-@include media-breakpoint-down(lg) {
-	.page-user-chats.chat-loaded  {
-		padding-bottom: 4.75rem;
-	}
-}
-
-@include media-breakpoint-down(md) {
-	.page-user-chats.chat-loaded  {
-		padding-bottom: initial;
-	}
-	[component="chat/nav-wrapper"] {
-		width: 100%;
-	}
-
-
-	.page-user-chats.chat-loaded .bottombar {
-		display: none!important;
-	}
-
-	[component="chat/nav-wrapper"][data-loaded="1"] {
-		display: none!important;
-	}
-
-	[component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] {
-		display: none!important;
-	}
-}
-
-.chat-modal {
-	left: auto;
-	top: auto;
-	bottom: 0px;
-	right: 2rem;
-	width: auto!important;
-	height: auto!important;
-	[component="chat/user/list/btn"], [component="chat/pinned/messages/btn"] {
-		display: none!important;
-	}
-}
+}

package/scss/common.scss

@@ -23,15 +23,9 @@ hr {
 	opacity: 1;
 }
 
-.ff-base {
-	font-family: $font-family-base !important;
-}
-.ff-sans {
-	font-family: $font-family-sans-serif !important;
-}
-.ff-secondary {
-	font-family: $font-family-secondary;
-}
+.ff-base { font-family: $font-family-base !important; }
+.ff-sans { font-family: $font-family-sans-serif !important; }
+.ff-secondary { font-family: $font-family-secondary; }
 .tracking-tight { letter-spacing: -0.02em; }
 
 .caret {
@@ -39,7 +33,6 @@ hr {
 		border: none;
 		font-family: "FontAwesome";
 		content: "\f078";
-		color: tint-color($primary, 40%);
 	}
 }
 
@@ -104,56 +97,6 @@ body:not(.page-user) {
 	}
 }
 
-@mixin btn-ghost-base {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: ($spacer * 0.5);
-	border-radius: $border-radius-sm;
-	border-width: 1px;
-	border-color: transparent;
-	background-color: transparent;
-	padding: ($spacer * 0.25) ($spacer * 0.5);
-	text-align: left;
-	--bs-text-opacity: 1;
-	color: inherit !important;
-	font-family: $font-family-secondary;
-	cursor: pointer;
-	&:hover, &.active {
-		background-color: var(--btn-ghost-hover-color);
-		text-decoration: none;
-	}
-}
-
-.btn-ghost {
-	@include btn-ghost-base();
-	line-height: 1.5rem;
-	> i {
-		line-height: 1.5rem;
-	}
-}
-
-.btn-ghost-sm {
-	@include btn-ghost-base();
-	font-size: 0.875rem;
-	line-height: 1.25rem;
-	> i {
-		line-height: 1.25rem;
-	}
-}
-
-.btn-outline {
-	@include btn-ghost-base();
-	border-color: $border-color;
-}
-
-.btn-outline-sm {
-	@include btn-ghost-base();
-	border-color: $border-color;
-	font-size: 0.875rem;
-	line-height: 1.25rem;
-}
-
 .flex-basis-md-200 {
 	@include media-breakpoint-up(md) {
 		flex-basis: 200px!important;

package/scss/overrides.scss

@@ -35,20 +35,6 @@ $text-muted: $gray-600 !default;
 $border-color: $gray-200 !default;
 $link-color: shade-color($blue, 20%) !default;
 
-$btn-ghost-hover-color: mix($light, $dark, 90%);
-$btn-ghost-active-color: lighten($btn-ghost-hover-color, 5%);
-$btn-ghost-hover-color-dark: mix($dark, $light, 90%);
-$btn-ghost-active-color-dark: lighten($btn-ghost-hover-color-dark, 5%);
-
-:root {
-	--btn-ghost-hover-color: #{$btn-ghost-hover-color};
-	--btn-ghost-active-color: #{$btn-ghost-active-color};
-}
-[data-bs-theme="dark"] {
-	--btn-ghost-hover-color: #{$btn-ghost-hover-color-dark};
-	--btn-ghost-active-color: #{$btn-ghost-active-color-dark};
-}
-
 // no caret on dropdown-toggle
 $enable-caret: false;
 

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 fw-semibold dropdown-toggle" data-bs-toggle="dropdown" type="button">
+			<button class="btn-ghost-sm ff-secondary fw-semibold dropdown-toggle" data-bs-toggle="dropdown" type="button">
 				<span>[[user:change-all]]</span>
 			</button>
 			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end">

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 fw-semibold {{{ if template.account/posts }}}active{{{ end }}}">[[global:header.recent]]</a>
+		<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>
 		{{{ if !reputation:disabled }}}
-		<a href="{config.relative_path}/user/{userslug}/best"class="btn-ghost-sm fw-semibold {{{ if template.account/best }}}active{{{ end }}}">[[global:best]]</a>
-		<a href="{config.relative_path}/user/{userslug}/controversial" class="btn-ghost-sm fw-semibold {{{ if template.account/controversial }}}active{{{ end }}}">[[global:controversial]]</a>
+		<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>
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/upvoted" class="btn-ghost-sm fw-semibold {{{ if template.account/upvoted }}}active{{{ end }}}">[[global:upvoted]]</a>
+		<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>
 		{{{ if !downvote:disabled }}}
-		<a href="{config.relative_path}/user/{userslug}/downvoted" class="btn-ghost-sm fw-semibold {{{ if template.account/downvoted }}}active{{{ end }}}">[[global:downvoted]]</a>
+		<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>
 		{{{ end }}}
 		{{{ end }}}
 		{{{ end }}}
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/bookmarks" class="btn-ghost-sm fw-semibold {{{ if template.account/bookmarks }}}active{{{ end }}}">[[user:bookmarks]]</a>
+		<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>
 		{{{ end }}}
 	</div>
 </div>

package/templates/account/topics.tpl

@@ -22,9 +22,9 @@
 
 	<div class="d-flex gap-1">
 		{{{ if canEdit }}}
-		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost-sm fw-semibold {{{ if template.account/topics }}}active{{{ end }}}">[[global:header.recent]]</a>
-		<a href="{config.relative_path}/user/{userslug}/watched"class="btn-ghost-sm fw-semibold {{{ if template.account/watched }}}active{{{ end }}}">[[user:watched]]</a>
-		<a href="{config.relative_path}/user/{userslug}/ignored" class="btn-ghost-sm fw-semibold {{{ if template.account/ignored }}}active{{{ end }}}">[[user:ignored]]</a>
+		<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>
 		{{{ end }}}
 	</div>
 </div>

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 border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{targetId}">
+			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="{config.relative_path}/{type_path}/{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 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 ff-secondary border btn-sm justify-content-start 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 border btn-sm justify-content-start" href="#" data-action="assign">
+			<a class="btn btn-ghost ff-secondary border btn-sm justify-content-start" href="#" data-action="assign">
 				<i class="fa fa-fw fa-id-card-o text-primary"></i>
 				[[flags:assign-to-me]]
 			</a>
@@ -152,7 +152,7 @@
 			<div class="pb-4 border-bottom">
 				<div class="d-flex align-items-center">
 					<h2 class="h6 fw-bold me-auto mb-0">[[flags:notes]]</h2>
-					<button class="btn btn-ghost border" data-action="addEditNote">[[flags:add-note]]</button>
+					<button class="btn btn-ghost ff-secondary border" data-action="addEditNote">[[flags:add-note]]</button>
 				</div>
 				<ul component="flag/notes" class="list-unstyled mt-4">
 					{{{ if !notes.length }}}

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 fw-semibold {{{ if (sort == "alpha") }}}active{{{ end }}}">[[groups:details.group-name]]</a>
-					<a href="?sort=count" class="btn-ghost fw-semibold {{{ if (sort == "count") }}}active{{{ end }}}">[[groups:details.member-count]]</a>
-					<a href="?sort=date" class="btn-ghost fw-semibold {{{ if (sort == "date") }}}active{{{ end }}}">[[groups:details.creation-date]]</a>
+					<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>
 				</div>
 			</div>
 		</div>

package/templates/notifications.tpl

@@ -12,7 +12,7 @@
 				{{{ if ./separator }}}
 				<hr/>
 				{{{ else }}}
-				<a class="btn-ghost fw-semibold {{{ if ./selected }}}active{{{ end }}}" href="{config.relative_path}/notifications?filter={./filter}">
+				<a class="btn-ghost 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 fw-semibold {{{ if template.account/profile }}}active{{{ end }}}">
+		<a href="{config.relative_path}/user/{userslug}" class="btn-ghost 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/posts"class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/topics" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/groups" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/followers" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/following" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/categories" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/tags" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/blocks" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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 fw-semibold
+		<a href="{config.relative_path}/user/{userslug}/uploads" class="btn-ghost ff-secondary fw-semibold
 			{{{ 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,15 +67,15 @@
 
 		{{{ if (loggedIn && (!isSelf && !banned)) }}}
 		<hr class="w-100 my-2"/>
-		<a href="#" component="account/flag" class="btn-ghost-sm">
+		<a href="#" component="account/flag" class="btn-ghost-sm ff-secondary">
 			<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 href="#" component="account/block" class="btn-ghost-sm {{{ if isBlocked }}}hidden{{{ end }}}">
+		<a href="#" component="account/block" class="btn-ghost-sm ff-secondary {{{ 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 {{{ if !isBlocked }}}hidden{{{ end }}}">
+		<a href="#" component="account/unblock" class="btn-ghost-sm ff-secondary {{{ 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>
@@ -83,18 +83,18 @@
 
 		{{{ if canEdit }}}
 		<hr class="w-100 my-2"/>
-		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm text-xs
+		<a href="{config.relative_path}/user/{userslug}/edit" class="btn-ghost-sm ff-secondary text-xs
 		{{{ 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 text-xs
+		<a href="{config.relative_path}/user/{userslug}/settings" class="btn-ghost-sm ff-secondary text-xs
 			{{{ 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 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-ghost-sm ff-secondary text-xs 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/filter-dropdown-content.tpl

@@ -1,4 +1,4 @@
-<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
     {{{ if selectedCategory }}}
     <span class="category-item d-inline-flex align-items-center gap-1">
         {buildCategoryIcon(selectedCategory, "18px", "rounded-circle")}

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

@@ -1,4 +1,4 @@
-<button type="button" class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
+<button type="button" class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown">
     <span component="category-selector-selected">
         {{{ if (selectedCategory && !showCategorySelectLabel) }}}
         <span class="category-item d-inline-flex align-items-center gap-1">

package/templates/partials/category/sort.tpl

@@ -1,5 +1,5 @@
 <div class="btn-group bottom-sheet" component="thread/sort">
-	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-arrow-down-wide-short text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:sort-by]]</span>
 	</button>

package/templates/partials/category/subcategory.tpl

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

package/templates/partials/category/tools.tpl

@@ -1,6 +1,6 @@
 {{{ if showTopicTools }}}
 <div class="btn-group thread-tools bottom-sheet">
-	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<i class="fa fa-fw fa-gear text-primary"></i>
 		<span class="visible-md-inline visible-lg-inline fw-semibold">[[topic:thread-tools.title]]</span>
 		<span component="topic/selected/badge" class="badge rounded-pill bg-secondary"></span>

package/templates/partials/category/watch.tpl

@@ -1,6 +1,6 @@
 {{{ if config.loggedIn }}}
 <div class="btn-group bottom-sheet" component="topic/watch">
-	<button class="btn-ghost-sm d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
+	<button class="btn-ghost-sm ff-secondary d-flex gap-2 dropdown-toggle" data-bs-toggle="dropdown" type="button">
 		<span component="category/watching/menu" {{{ if !./isWatched }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-bell-o text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:watching]]</span></span>
 
 		<span component="category/tracking/menu" {{{ if !./isTracked }}}class="hidden"{{{ end }}}><i class="fa fa-fw fa-inbox text-primary"></i><span class="visible-md-inline visible-lg-inline fw-semibold"> [[category:tracking]]</span></span>

package/templates/partials/flags/filters.tpl

@@ -2,7 +2,7 @@
 	<div class="btn-group bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.quick }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.quick }}}[[flags:filter-quick-{./filters.quick}]]{{{ else }}}[[flags:quick-filters]]{{{ end }}}</span>
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</a>
 		<ul class="dropdown-menu p-1 text-sm">
 			<li>
@@ -22,7 +22,7 @@
 			{{{ else }}}
 			<span class="visible-md-inline visible-lg-inline">[[unread:all-categories]]</span>
 			{{{ end }}}
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</button>
 		<div component="category-selector-search" class="hidden position-absolute">
 			<input type="text" class="form-control form-control-sm" placeholder="[[search:type-to-search]]" autocomplete="off">
@@ -50,7 +50,7 @@
 	<div class="btn-group bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if (sort != "newest") }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
 			<span class="filter-label">{{{ if (sort != "newest") }}}[[flags:sort-{./sort}]]{{{ else }}}[[flags:sort]]{{{ end }}}</span>
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</a>
 		<ul class="dropdown-menu p-1 text-sm">
 			<li><h6 class="dropdown-header">[[flags:sort-all]]</h6></li>
@@ -67,7 +67,7 @@
 	<div class="btn-group bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.state }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.state }}}[[flags:state-{./filters.state}]]{{{ else }}}[[flags:filter-state]]{{{ end }}}</span>
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</a>
 		<ul class="dropdown-menu p-1 text-sm">
 			<li class="dropdown-item rounded-1" data-name="state" data-value="open">[[flags:state-open]]</li>
@@ -80,7 +80,7 @@
 	<div class="btn-group bottom-sheet">
 		<a class="filter-btn btn btn-light btn-sm border {{{ if filters.type }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
 			<span class="filter-label">{{{ if filters.type }}}[[flags:filter-type-{./filters.type}]]{{{ else }}}[[flags:filter-type]]{{{ end }}}</span>
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</a>
 		<ul class="dropdown-menu p-1 text-sm">
 			<li class="dropdown-item rounded-1" data-name="type" data-value="all">[[flags:filter-type-all]]</li>
@@ -92,7 +92,7 @@
 	<div component="flags/filter/assignee" class="dropdown bottom-sheet" data-filter-name="assignee">
 		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.assignee }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
 			<span class="filter-label">[[flags:filter-assignee]]</span>
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</a>
 
 		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
@@ -119,7 +119,7 @@
 	<div component="flags/filter/reporterId" class="dropdown bottom-sheet" data-filter-name="reporterId">
 		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.reporterId }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
 			<span class="filter-label">[[flags:filter-reporterId]]</span>
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</a>
 
 		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">
@@ -146,7 +146,7 @@
 	<div component="flags/filter/targetUid" class="dropdown bottom-sheet" data-filter-name="targetUid">
 		<a component="user/filter/button" class="filter-btn btn btn-light btn-sm border {{{ if filters.targetUid }}}active-filter{{{ end }}} dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
 			<span class="filter-label">[[flags:filter-targetUid]]</span>
-			<span class="caret"></span>
+			<span class="caret text-primary opacity-75"></span>
 		</a>
 
 		<ul class="dropdown-menu p-1 text-sm" style="min-width: 350px;">

package/templates/partials/groups/filter-dropdown-content.tpl

@@ -1,10 +1,10 @@
 <div class="dropdown bottom-sheet">
-	<button type="button" class="btn-ghost-sm dropdown-toggle" data-bs-toggle="dropdown">
+	<button type="button" class="btn-ghost-sm ff-secondary dropdown-toggle" data-bs-toggle="dropdown">
 		{{{ if selectedGroup }}}
 		<span class="fw-semibold">{selectedGroup.displayName}</span>
 		{{{ else }}}
 		<span class="fw-semibold">[[groups:all-groups]]</span>
-		{{{ end }}} <span class="caret"></span>
+		{{{ end }}} <span class="caret text-primary opacity-75"></span>
 	</button>
 	<ul class="dropdown-menu p-1 text-sm" role="menu">
 		<li role="presentation" class="user {{{ if !selectedGroup}}}selected{{{end}}}">