nodebb-theme-harmony 1.0.0 → 1.0.1

package/scss/common.scss

@@ -1,27 +1,88 @@
 
 body {
 	overflow-y: scroll;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
 }
+
+// fixes chrome font boosting :/ https://stackoverflow.com/questions/13430897/how-to-override-font-boosting-in-mobile-chrome
+body * {
+	max-height:1000000px;
+	text-size-adjust: none;
+	-webkit-text-size-adjust: none;
+	-moz-text-size-adjust: none;
+}
+
+hr {
+    border-top-color: $border-color;
+	opacity: 1;
+}
+
 .ff-base {
-	font-family: $font-family-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.025em; }
+.tracking-tight { letter-spacing: -0.02em; }
+
+.caret {
+	&::after {
+		border: none;
+		font-family: "FontAwesome";
+		content: "\f078";
+		color: tint-color($primary, 40%);
+	}
+}
+
+.placeholder-wave {
+	opacity: 0.5;
+}
+
+.bg-card-cap {
+	--bs-bg-opacity: 1;
+	background-color: $card-cap-bg!important;
+}
 
-.text-md { font-size: 1.125rem!important; } // 18px
-.text-sm { font-size: 0.875rem!important; } // 14px
-.text-xs { font-size: 0.75rem!important; } // 12px
+blockquote {
+	background-color: $light;
+	font-style: normal;
+	border-left: 2px solid $border-color;
+	padding: 1rem;
+	p:last-child {
+		margin-bottom: 0;
+	}
+}
 
-.btn-link:hover {
-	text-decoration: none;
+body:not(.page-user) {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying {
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
+}
+.page-user {
+	#content {
+		transition: opacity 150ms linear;
+		&.ajaxifying .account-content {
+			transition: opacity 150ms linear;
+			-moz-opacity: 0;
+			opacity: 0;
+		}
+	}
 }
 
 .sticky-tools {
 	position: sticky;
 	z-index: 3;
-	top: calc($spacer * 0.5);
+	top: 0;
+	padding: 0.25rem 0;
 	background-color: $body-bg;
 }
 // quartz doesn't need body-bg for tool background
@@ -35,6 +96,13 @@ body {
 	}
 }
 
+.btn-link {
+	&:hover, &.active {
+		background-color: $btn-ghost-hover-color;
+		text-decoration: none;
+	}
+}
+
 @mixin btn-ghost-base {
 	display: flex;
 	align-items: center;
@@ -48,10 +116,10 @@ body {
 	text-align: left;
 	--bs-text-opacity: 1;
 	color: inherit !important;
-	$hover-color: mix($light, $dark, 90);
+	font-family: $font-family-secondary;
 	cursor: pointer;
 	&:hover, &.active {
-		background-color: $hover-color;
+		background-color: $btn-ghost-hover-color;
 		text-decoration: none;
 	}
 }
@@ -59,12 +127,18 @@ body {
 .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 {

package/scss/flags.scss

@@ -0,0 +1,5 @@
+.page-flags {
+	[component="flag/history"] {
+		max-height: 30rem;
+	}
+}

package/scss/groups.scss

@@ -3,8 +3,8 @@
 }
 
 .group-hover-bg {
-	$hover-color: mix($light, $dark, 97);
-	$border-color: mix($light, $dark, 90);
+	$hover-color: mix($light, $dark, 97%);
+	$border-color: mix($light, $dark, 90%);
 	.card-body {
 		border-color: $border-color!important;
 	}

package/scss/harmony.scss

@@ -9,6 +9,7 @@
 @import "status";
 @import "account";
 @import "groups";
+@import "flags";
 @import "modals";
 
 @import "modules/breadcrumbs";
@@ -20,5 +21,7 @@
 @import "modules/topics-list";
 @import "modules/cover";
 @import "modules/nprogress";
+@import "modules/paginator";
+@import "modules/filters";
 
 @import "skins";

package/scss/mixins.scss

@@ -124,9 +124,13 @@
 			display: none;
 		}
 
-		.timeline-event {
-			.timeline-text.timeago {
-				display: none;
+
+		[component="topic/event"], [component="topic/necro-post"] {
+			&.timeline-event {
+				.timeline-text {
+					line-height: 16px;
+					font-size: 0.75rem;
+				}
 			}
 		}
 	}

package/scss/modals.scss

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

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/tags.scss

@@ -1,6 +1,6 @@
 .tag-list {
 	.tag {
-		background-color: $gray-200;
-		color: $gray-700;
+		background-color: $gray-200!important;
+		color: $gray-700!important;
 	}
 }

package/scss/modules/topic-navigator.scss

@@ -1,59 +1,35 @@
-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 {
+	.scroller-content {
+		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;
@@ -113,7 +135,38 @@
 		font-size: 9px;
 		line-height: 12px;
 	}
-	.search.bottom-sheet .dropdown-menu {
-		max-height: 100%;
+
+	.navigation-dropdown, .user-dropdown {
+		> li {
+			> a, .dropdown-item {
+				padding: 10px 20px!important;
+			}
+		}
+		left: 0!important;
+		right: 0!important;
+		bottom: $spacer!important;
+		box-shadow: none!important;
+		max-height: 60vh!important;
+		overflow: auto!important;
+	}
+	.search-dropdown .quick-search-results {
+		max-height: 225px!important;
+		overflow-y: auto!important;
+	}
+	.search-dropdown, .chats-dropdown, .notifications-dropdown, .drafts-dropdown {
+		left: 0 !important;
+		right: 0 !important;
+		bottom: $spacer * 0.7 !important;
+		box-shadow: none!important;
+
+		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,14 +40,22 @@
 			}
 
 			[component="post"] {
-				&.deleted {
+				&.selected .post-container {
+					background-color: mix($body-bg, $body-color, 90%);
+				}
+				&.deleted .post-container {
 					opacity: .5;
 				}
 
 				[component="post/content"] {
+					@include fix-lists();
+
 					pre {
 						max-height: calc($font-size-base * 24);
 					}
+					table { // text-break breaks table formatting
+						word-break:initial!important;
+					}
 				}
 
 				> [component="post/footer"] {
@@ -67,6 +66,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 +116,15 @@
 			}
 		}
 	}
+
+	.pagination-block {
+		display: block;
+		transition: opacity 250ms ease-in;
+		opacity: 0;
+		&.ready {
+			opacity: 1;
+		}
+	}
 }
 
 @include media-breakpoint-up(sm) {
@@ -115,6 +134,10 @@
 				[component="post/actions"] {
 					opacity: 0;
 					transition: $transition-fade;
+
+					&:has([aria-expanded="true"]) {
+						opacity: 1;
+					}
 				}
 
 				&:hover {