nodebb-theme-harmony 1.0.0-beta.10 → 1.0.0-beta.100

package/scss/modals.scss

@@ -1,4 +1,9 @@
 .tool-modal {
 	bottom: $spacer * 3;
 	right: $spacer * 4;
-}
+
+	@include media-breakpoint-down(md) {
+		right: $spacer;
+		left: $spacer;
+	}
+}

package/scss/modules/bottom-sheet.scss

@@ -8,7 +8,7 @@
 			inset: auto 0 0 0!important;
 
 			margin: 0 -1px -1px -1px;
-			padding: 0 5px 4rem 5px!important;
+			padding: $spacer * 0.25 !important;
 			max-height: 60%;
 
 			box-shadow: 0 2px 6px rgba(0,0,0,0.35);

package/scss/modules/composer.scss

@@ -6,10 +6,6 @@ $composer-bg: $body-bg !default;
 	background-color: $bg !important;
 }
 
-.composer {
-	z-index: 3 !important;
-}
-
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
 	$composer-color: $secondary;

package/scss/modules/cover.scss

@@ -12,12 +12,11 @@
 
 	&:hover {
 		.controls {
-			opacity: 0.8;
+			opacity: 1;
 		}
 	}
 
 	.controls {
-		text-align: center;
 		height: 200px;
 		line-height: 200px;
 		opacity: 0;
@@ -28,15 +27,6 @@
 		> * {
 			pointer-events: all;
 		}
-
-		.fa {
-			color: white;
-			background-color: #333;
-			opacity: 1;
-			margin: 15px;
-			padding: 5px;
-			border-radius: 4px;
-		}
 	}
 
 	&.active {

package/scss/modules/filters.scss

@@ -0,0 +1,8 @@
+[component="search/filters"], [component="flags/filters"] {
+	.filter-btn {
+		border-color: $gray-300!important;
+		&.active-filter {
+			border-color: $primary!important;
+		}
+	}
+}

package/scss/modules/paginator.scss

@@ -0,0 +1,24 @@
+.skin-noskin [component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $body-color;
+		background-color: $gray-300;
+		border-color: $gray-300;
+	}
+
+	.page-item:not(.disabled):hover .page-link {
+		color: $body-color;
+	}
+}
+
+[component="pagination"] {
+	.page-item.active:not(.disabled) .page-link {
+		color: $pagination-active-color;
+	}
+	.page-item:not(.disabled):hover .page-link {
+		color: $pagination-hover-color;
+		background-color: $pagination-hover-bg;
+	}
+	.page-item:not(.disabled) .page-link {
+		color: $body-color;
+	}
+}

package/scss/modules/topic-navigator.scss

@@ -1,59 +1,33 @@
-body:not(.page-topic) [component="topic/navigator"] {
-	display: none!important;
-}
-
-[component="topic/navigator"] {
-	max-height: calc(200px + (2rem * 4));
-	user-select: none;
-
-	.track {
-		width: 2px;
-		background-color: mix($dark, $light, 10%);
-
-		.handle {
+.topic .pagination-block {
+	min-width: 150px;
+	.scroller-container {
+		left: 10px;
+		height: 300px;
+		border-left: 2px solid $border-color;
+
+		.scroller-thumb {
+			left: -5px;
+			&:not(.active) {
+				transition: top 100ms linear;
+			}
 			cursor: grab;
-			transition: $transition-base;
-
-			&:active {
-				transition: none;
+			&.active {
 				cursor: grabbing;
 			}
-
-			.meta {
-				top: -8px;
-				left: calc($spacer + 8px);
-				font-size: 13px;
-			}
-		}
-
-		.knob {
-			width: 16px;
-			height: 16px;
-			background-color: $link-color;
-			margin-left: 1px;
 		}
 
 		.unread {
-			width: 2px;
+			width: 1px;
 			height: 0; // initial
 			bottom: 0;
 			background: $primary;
 			transition: $transition-base;
+			left: -1px;
 
 			.meta {
-				left: calc($spacer + 8px);
+				left: 5px;
 				font-size: 13px;
 			}
 		}
 	}
-}
-
-.sidebar.open {
-	[component="topic/navigator"] {
-		align-self: flex-start;
-	}
-
-	[component="topic/navigator"].d-sm-flex.mt-auto + .mt-auto {
-		margin-top: 0 !important;
-	}
 }

package/scss/modules/topics-list.scss

@@ -1,20 +1,35 @@
-.topic-list {
-	overflow-x: hidden!important;
-}
-[component="category/topic"] {
-	&.selected {
-		[component="topic/select"] {
-			color: $success!important;
+ul.topics-list, ul.categories-list {
+	li {
+		&.deleted {
+			opacity: 0.6;
+			.meta { display: none!important; }
 		}
-	}
-	.lastpost .post-content {
-		p { margin-bottom: 0; }
-	}
 
-	&.unread .title {
-		color: $link-color;
-	}
-	.ui-sortable-handle {
-		cursor: move;
+		&.selected {
+			background-color: mix($body-bg, $body-color, 90%);
+			[component="topic/select"] {
+				color: $success!important;
+			}
+		}
+		p {
+			margin: 0 !important;
+		}
+
+		// all other skins use link-color for unread titles
+		&.unread .title {
+			color: $link-color;
+		}
+
+		.ui-sortable-handle {
+			cursor: move;
+		}
+
+		// if only one thumb don't display
+		[data-numthumbs="1"] { display: none; }
 	}
-}
+}
+
+// on default skin use primary color for unread titles
+.skin-noskin ul.topics-list li.unread .title {
+	color: $primary;
+}

package/scss/modules/user-menu.scss

@@ -2,4 +2,10 @@
 	[component="header/profilelink"] > div, .user-status > div {
 		min-width: 1.25em; // match fontawesome fixed width
 	}
+	.user-status i.fa-check {
+		display: none;
+	}
+	.user-status.selected i.fa-check {
+		display: block;
+	}
 }

package/scss/overrides.scss

@@ -39,6 +39,8 @@ $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%);
+
 // no caret on dropdown-toggle
 $enable-caret: false;
 
@@ -53,8 +55,9 @@ $link-hover-decoration: underline;
 
 // Custom fonts
 $font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-family-secondary: "Poppins" !default;
+$font-family-secondary: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
 $font-weight-semibold: 500 !default;
+$small-font-size: 0.875rem !default;
 
 $breadcrumb-divider: quote("→");
 $breadcrumb-divider-color: $gray-500 !default;

package/scss/sidebar.scss

@@ -1,10 +1,10 @@
 .skin-noskin {
 	// only using colors when there is no bootswatch skin applied
-	nav.sidebar, .bottombar {
+	nav.sidebar, .bottombar-nav {
 		color: $secondary !important;
 		background-color: $light !important;
 	}
-	.bottombar {
+	.bottombar-nav {
 		.dropdown-menu {
 			color: $secondary !important;
 			background-color: $light !important;
@@ -13,7 +13,7 @@
 }
 
 .sidebar {
-	$hover-color: mix($light, $dark, 90);
+	$hover-color: mix($light, $dark, 90%);
 
 	@include media-breakpoint-up(lg) {
 		&.open {
@@ -45,11 +45,17 @@
 	}
 
 	.nav-link {
+		@extend .ff-secondary;
 		padding: 0;
 		&.active {
 			background-color: $hover-color;
 		}
 	}
+	.nav-item {
+		.dropdown-menu .dropdown-item {
+			@extend .rounded-1;
+		}
+	}
 	#user_dropdown .avatar {
 		margin: 2px 0; // fixes the avatar so its height is same as the icons on right sidebar
 	}
@@ -76,7 +82,7 @@
 	.chats-dropdown, .notifications-dropdown, .drafts-dropdown {
 		min-width: 300px;
 		width: 300px;
-		ul {
+		.list-container {
 			max-height: 400px;
 			overflow-y: auto;
 		}
@@ -87,7 +93,8 @@
 		line-height: 12px;
 		&.visible-open {
 			font-size:12px;
-			line-height: 16px;
+			line-height: 12px;
+			font-weight: normal;
 		}
 	}
 
@@ -97,7 +104,22 @@
 }
 
 .bottombar {
-	z-index: $zindex-dropdown;
+	transition: bottom 150ms linear;
+
+	.pagination-block {
+		.scroller-container {
+			border-right: 3px solid;
+			margin-right: 5.5px;
+			.scroller-thumb {
+				right: -6px;
+				padding-right: 15px;
+				margin-right: -15px;
+			}
+		}
+	}
+}
+
+.bottombar-nav {
 	.nav-text {
 		font-size: 1rem;
 		color: $body-color;
@@ -128,15 +150,21 @@
 		overflow: auto!important;
 	}
 	.search-dropdown .quick-search-results {
-		max-height: 250px!important;
+		max-height: 225px!important;
 		overflow-y: auto!important;
 	}
 	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
-		left: 0!important;
-		right: 0!important;
-		bottom: $spacer!important;
+		left: 0 !important;
+		right: 0 !important;
+		bottom: $spacer * 0.7 !important;
 		box-shadow: none!important;
-		ul {
+
+		border-left: 0;
+		border-right: 0;
+		border-bottom: 0;
+		border-radius: 0;
+
+		.list-container {
 			max-height: 60vh!important;
 			overflow-y: auto!important;
 		}

package/scss/topic.scss

@@ -1,3 +1,5 @@
+.pagination-block { display: none; }
+
 .page-topic {
 	[component="topic/title"] {
 		font-size: 28px;
@@ -14,21 +16,10 @@
 		line-height: 20px;
 	}
 
-	.action-bar {
-		.dropdown-toggle::after {
-			border: none;
-			font-family: "FontAwesome";
-			content: "\f078";
-			color: tint-color($primary, 40%);
-
-			position: relative;
-			top: 2px;
-		}
-	}
-
 	.topic {
 		.posts {
 			max-width: 960px;
+			width: 960px;
 			// fixes code blocks pushing content out on mobile
 			@include media-breakpoint-down(md) {
 				max-width: calc(100vw - $grid-gutter-width);
@@ -49,11 +40,13 @@
 			}
 
 			[component="post"] {
-				&.deleted {
+				&.deleted .post-container {
 					opacity: .5;
 				}
 
 				[component="post/content"] {
+					@include fix-lists();
+
 					pre {
 						max-height: calc($font-size-base * 24);
 					}
@@ -67,6 +60,17 @@
 			[component="post/reply-count"] {
 				font-size: $font-size-base * .75;
 			}
+
+			[component="post/upvote"], [component="post/downvote"] {
+				&.upvoted, &.downvoted {
+					background-color: lighten($btn-ghost-hover-color, 5%);
+
+					&:hover {
+					background-color: $btn-ghost-hover-color;
+
+					}
+				}
+			}
 		}
 	}
 
@@ -106,6 +110,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {
@@ -115,6 +128,10 @@
 				[component="post/actions"] {
 					opacity: 0;
 					transition: $transition-fade;
+
+					&:has([aria-expanded="true"]) {
+						opacity: 1;
+					}
 				}
 
 				&:hover {

package/templates/account/blocks.tpl

@@ -1,45 +1,40 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<div class="d-flex justify-content-between mb-3">
-				<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
-				<div class="justify-content-end">
-					<div class="dropdown">
-						<div class="input-group">
-							<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
-							<button class="btn btn-primary btn-sm" type="button">
-								<i class="fa fa-search"></i>
-							</button>
-						</div>
+<!-- IMPORT partials/account/header.tpl -->
+<div class="d-flex justify-content-between mb-3">
+	<h3 class="fw-semibold fs-5">[[pages:account/blocks, {username}]]</h3>
+	<div class="justify-content-end">
+		<div class="dropdown">
+			<div class="input-group">
+				<input class="form-control form-control-sm" type="text" id="user-search" placeholder="[[users:enter_username]]" data-bs-toggle="dropdown" autocomplete="off"/>
 
-						<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end block-edit overflow-auto" style="max-height:300px;">
-							<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
-							{{{ each edit }}}
-							<li class="">
-								<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
-									<div class="text-truncate">
-										<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
-									</div>
-									<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
-								</div>
-							</li>
-							{{{ end }}}
-						</ul>
-					</div>
-				</div>
-			</div>
-			<div class="users">
-				<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
-					{{{ each users }}}
-					<!-- IMPORT partials/users/item.tpl -->
+				<ul component="blocks/search/list" class="dropdown-menu dropdown-menu-end p-1 text-sm block-edit overflow-auto" style="max-height:300px;">
+					<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+					{{{ each edit }}}
+					<li class="">
+						<div class="dropdown-item d-flex flex-nowrap gap-2 justify-content-between">
+							<div class="text-truncate">
+								<a href="{config.relative_path}/uid/{./uid}" class="text-decoration-none">{buildAvatar(edit, "24px", true)} {./username}</a>
+							</div>
+							<button class="btn btn-sm btn-primary text-nowrap" data-uid="{./uid}" data-action="toggle">[[user:block_toggle]]</button>
+						</div>
+					</li>
 					{{{ end }}}
-				</div>
-				<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
-				<!-- IMPORT partials/paginator.tpl -->
+				</ul>
+
+				<button class="btn btn-primary btn-sm" type="button">
+					<i class="fa fa-search"></i>
+				</button>
 			</div>
 		</div>
-
 	</div>
-</div>
+</div>
+<div class="users">
+	<div id="users-container" class="row row-cols-2 row-cols-lg-3 row-cols-xl-4 g-2">
+		{{{ each users }}}
+		<!-- IMPORT partials/users/item.tpl -->
+		{{{ end }}}
+	</div>
+	<div class="alert alert-warning text-center"{{{ if users.length }}} style="display: none;"{{{ end }}}>[[user:has_no_blocks]]</div>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->

package/templates/account/categories.tpl

@@ -1,34 +1,52 @@
-<div class="account">
-	<!-- IMPORT partials/account/header.tpl -->
+<!-- IMPORT partials/account/header.tpl -->
 
-	<div class="d-flex flex-column flex-md-row">
-		<!-- IMPORT partials/account/sidebar-left.tpl -->
-		<div class="flex-1 ps-md-2 ps-lg-5" style="min-width: 0;">
-			<h3 class="fw-semibold fs-5">{title}</h3>
+<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">{title}</h3>
+	</div>
 
-			<div class="row">
-				<div class="col-lg-12 mb-2">
-					<div class="btn-group bottom-sheet" component="category/watch/all">
-						<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button">
-							<span>[[user:change_all]]</span>
-							<span class="caret"></span>
-						</button>
-						<ul class="dropdown-menu">
-							<li><a class="dropdown-item" href="#" component="category/watching" data-state="watching"><i class="fa fa-fw fa-inbox"></i> [[category:watching]]<p class="help-text"><small>[[category:watching.description]]</small></p></a></li>
-							<li><a class="dropdown-item" href="#" component="category/notwatching" data-state="notwatching"><i class="fa fa-fw fa-clock-o"></i> [[category:not-watching]]<p class="help-text"><small>[[category:not-watching.description]]</small></p></a></li>
-							<li><a class="dropdown-item" href="#" component="category/ignoring" data-state="ignoring"><i class="fa fa-fw fa-eye-slash"></i> [[category:ignoring]]<p class="help-text"><small>[[category:ignoring.description]]</small></p></a></li>
-						</ul>
-					</div>
-				</div>
-				<div class="col-lg-12">
-					<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
-						{{{each categories}}}
-						<!-- IMPORT partials/account/category-item.tpl -->
-						{{{end}}}
-					</ul>
-					<!-- IMPORT partials/paginator.tpl -->
-				</div>
-			</div>
+	<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">
+				<span>[[user:change_all]]</span>
+			</button>
+			<ul class="dropdown-menu p-1 text-sm dropdown-menu-end">
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/watching" data-state="watching">
+						<div class="d-flex align-items-center gap-2">
+							<i class="flex-shrink-0 fa fa-fw fa-inbox"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:watching]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:watching.description]]</div>
+					</a>
+				</li>
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/notwatching" data-state="notwatching">
+						<div class="d-flex align-items-center gap-2">
+							<i class="flex-shrink-0 fa fa-fw fa-clock-o"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:not-watching]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:not-watching.description]]</div>
+					</a>
+				</li>
+				<li><a class="dropdown-item rounded-1 d-flex flex-column p-2" href="#" component="category/ignoring" data-state="ignoring">
+						<div class="d-flex align-items-center gap-2">
+							<i class="flex-shrink-0 fa fa-fw fa-eye-slash"></i>
+							<span class="flex-grow-1 fw-semibold">[[category:ignoring]]</span>
+						</div>
+						<div class="help-text text-muted text-xs">[[category:ignoring.description]]</div>
+					</a>
+				</li>
+			</ul>
 		</div>
 	</div>
 </div>
+
+<div>
+	<ul class="categories list-unstyled" itemscope itemtype="http://www.schema.org/ItemList">
+		{{{each categories}}}
+		<!-- IMPORT partials/account/category-item.tpl -->
+		{{{end}}}
+	</ul>
+	<!-- IMPORT partials/paginator.tpl -->
+</div>
+
+<!-- IMPORT partials/account/footer.tpl -->