nodebb-theme-persona 12.1.6 → 12.1.7

package/{scss/categories.scss → less/categories.less}

@@ -6,10 +6,10 @@
 
 		padding-bottom: 10px;
 
-		@include media-breakpoint-down(sm) {
-			border-top: 1px solid $gray-200;
+		@media (max-width: @screen-xs-max) {
+			border-top: 1px solid @gray-lighter;
 			&:last-child {
-				border-bottom: 1px solid $gray-200;
+				border-bottom: 1px solid @gray-lighter;
 			};
 		}
 
@@ -18,8 +18,19 @@
 		.content {
 			padding: 10px 15px;
 
+			.icon {
+				font-size: 17px;
+				line-height: 17px;
+				padding: 13px;
+				border-radius: 50%;
+				margin-right: 15px;
+				min-width: 46px;
+				min-height: 46px;
+				margin-top: 2px;
+			}
+
 			img, .user-icon {
-				@include user-icon-style(46px, 2.4rem, 50%);
+				.user-icon-style(46px, 2.4rem, 50%);
 			}
 
 			h2 {
@@ -28,6 +39,12 @@
 				overflow: hidden;
 				font-size: 18px;
 				line-height: 22px;
+				margin: 0;
+				margin-left: 62px;
+
+				strong {
+					color: @gray-dark;
+				}
 			}
 		}
 
@@ -44,7 +61,7 @@
 			font-size: 16px;
 		}
 
-		.lastpost {
+		.card {
 			border-left: 4px solid #ccc;
 			text-align: left;
 			margin-top: 10px;
@@ -57,6 +74,12 @@
 				padding-left: 20px;
 			}
 
+			img {
+				border-radius: 50%;
+				width: 24px;
+				height: 24px;
+			}
+
 			p {
 				margin: 0;
 				.emoji {
@@ -74,21 +97,27 @@
 
 			.user-icon {
 				display: inline-block;
-				@include user-icon-style(24px, 1.5rem, 50%);
+				.user-icon-style(24px, 1.5rem, 50%);
 			}
 		}
 
 		.category-children {
 			.category-children-item {
-				min-width: 180px;
 				margin-right: 10px;
 				margin-bottom: 1px;
-				display: inline-block;
+			}
+			.icon {
+				min-width: 23px;
+				min-height: 23px;
+				font-size: 10px;
+				line-height: 12px;
+				padding: 5px;
+				margin-right: 5px;
 			}
 		}
 
 		[component="topic/header"] > i[component="topic/pinned"] {
-			color: $danger;
+			color: @brand-danger;
 		}
 	}
 
@@ -135,7 +164,7 @@
 	text-align: center;
 	margin: 0;
 	padding-top:25px;
-	@include pointer;
+	.pointer;
 	margin-bottom: 10px;
 	overflow:hidden;
 
@@ -199,6 +228,7 @@
 
 	small {
 		text-transform: uppercase;
+		color: @gray-light;
 		font-weight: 300;
 		font-size: 12px;
 	}

package/{scss/category.scss → less/category.less}

@@ -1,6 +1,7 @@
 .category {
 
 	.topic-list {
+		margin-top: 10px;
 		overflow: visible;
 	}
 
@@ -9,18 +10,15 @@
 			list-style: none;
 
 			&:not(.unread) {
-				.lastpost {
-					border-color: lighten($gray-600, 20%) !important;
+				.card {
+					border-color: lighten(@gray-light, 20%) !important;
 				}
 
 				h2 a {
-					color: $text-muted;
+					color: @text-muted;
 				}
 			}
-			.info {
-				margin-left: 62px;
-				font-size: 0.75rem;
-			}
+
 			&.deleted {
 				-moz-opacity: 0.30;
 				opacity: 0.30;
@@ -32,7 +30,7 @@
 
 			.select {
 				position: relative;
-				@include pointer;
+				.pointer;
 
 				&:before {
 					content: "";
@@ -48,13 +46,13 @@
 					top: 0px;
 					left: 0px;
 					border: 1px solid transparent;
-					background: $white;
+					background: white;
 					width: 100%;
 					height: 100%;
 					padding: 14px;
 
 					&:before {
-						@include pointer;
+						.pointer;
 					}
 				}
 
@@ -63,7 +61,7 @@
 				}
 
 				.fa-check, .avatar {
-					@include transition(.2s ease-in-out all);
+					.transition(.2s ease-in-out all);
 				}
 
 				float: left;
@@ -71,8 +69,8 @@
 
 			.avatar .select {
 				.fa-check {
-					border: 1px solid $success;
-					color: $success;
+					border: 1px solid @brand-success;
+					color: @brand-success;
 				}
 			}
 
@@ -82,8 +80,8 @@
 				}
 
 				.fa-check {
-					border: 1px solid $success;
-					color: $success;
+					border: 1px solid @brand-success;
+					color: @brand-success;
 					opacity: 1;
 				}
 			}
@@ -96,23 +94,29 @@
 				.avatar .select {
 					.fa-check {
 						opacity: 1;
-						background-color: $success;
-						border: 1px solid $success;
-						color: $white;
-						@include transition(all .15s ease-in-out);
+						background-color: @brand-success;
+						border: 1px solid @brand-success;
+						color: @btn-success-color;
+						.transition(all .15s ease-in-out);
 					}
 
 					&:hover .fa-check {
-						background-color: $success;
-						border: 1px solid $success;
-						color: $white;
+						background-color: @brand-success;
+						border: 1px solid @btn-success-border;
+						color: @btn-success-color;
 					}
 				}
 			}
 
-			.lastpost .user-icon {
+			.fa-stack {
+				font-size: 90%;
+				border-radius: 50%;
+				vertical-align: -6px;
+			}
+
+			.card .user-icon {
 				display: inline-block;
-				@include user-icon-style(24px, 1.5rem, 50%);
+				.user-icon-style(24px, 1.5rem, 50%);
 			}
 		}
 
@@ -122,7 +126,7 @@
 	}
 
 	.unread {
-		.title {
+		.topic-title {
 			font-weight: bold;
 		}
 	}
@@ -135,27 +139,72 @@
 .category, .categories, .subcategory {
 	> p {
 		text-transform: uppercase;
+		color: @gray-light;
 	}
 
 	.description {
+		font-size: 1.4rem;
 		font-weight: normal;
 		line-height: 1.2;
+		color: @gray-light;
 		margin-top: 5px;
 		min-height: 25px
 	}
 
-	.title, .description, .category-children {
+	.description, .category-children {
 		margin-left: 62px;
 	}
+
+	.category-children {
+		display: block;
+		font-size: 15px;
+
+		small {
+			color: #999999;
+			font-size: 1.4rem;
+    		vertical-align: -2px;
+		}
+	}
 }
 
 .categories-title {
 	text-transform: uppercase;
+	color: @gray-light;
 	margin: 0 0 10px;
 	font-size: 14px;
 	font-weight: normal;
 	line-height: 1.42857143;
 }
 
+[component="category-selector"], .category-dropdown-container {
+	.fa-stack {
+		font-size: 65%;
+		border-radius: 50%;
+	}
+
+	#category-dropdown-check:checked + .dropdown-menu {
+		display: block;
+	}
+}
+
+.category-dropdown-menu {
+	max-height: 500px;
+	overflow-y: auto;
+}
 
+.merge-topic-card {
+	position: fixed;
+	bottom: 10%;
+	right: 2rem;
+	z-index: @zindex-modal;
+	.topics-section {
+		max-height: 500px;
+		overflow-y: auto;
+	}
+}
 
+@media screen and (min-width: @screen-sm-min) {
+	.merge-topic-card {
+		max-width: 33%;
+	}
+}

package/{scss/chats.scss → less/chats.less}

@@ -1,8 +1,7 @@
 // Make chats page edge-to-edge
 .page-user-chats {
 	#content.container {
-		@include make-container();
-		max-width: unset;
+		width: auto;
 		padding: 0;
 	}
 
@@ -23,7 +22,7 @@
 .chats-full, .chat-modal {
 	display: flex;
 	flex-wrap: nowrap;
-	height: calc(100vh - var(--panel-offset) - $spacer);
+	height: calc(100vh - var(--panel-offset));
 
 	[component="chat/nav-wrapper"] {
 		flex: 1;
@@ -33,7 +32,7 @@
 			flex: 1;
 			overflow-y: auto;
 			margin-bottom: 0;
-			height: calc(100% - 5em);
+			height: ~"calc(100% - 5em)";
 		}
 
 		.chat-search {
@@ -42,11 +41,47 @@
 				width: 100%;
 			}
 		}
+
+		[component="chat/search/list"] {
+			padding: 0;
+			overflow-x: hidden;
+			overflow-y: auto;
+
+			li {
+				position: relative;
+				clear: both;
+				list-style-type: none;
+				padding: .5em;
+				height: 70px;
+				cursor: pointer;
+				border-left: 1px solid;
+				border-right: 1px solid;
+				border-bottom: 1px solid;
+				border-color: @gray-lighter;
+
+				i {
+					position: relative;
+					left: -30px;
+					font-size: 20px;
+					top: -20px;
+				}
+
+				img, .user-icon {
+					.user-icon-style(50px, 2.4rem, 50%);
+					margin-top: 4px;
+					margin-right: 13px;
+					margin-left: .5em;
+				}
+			}
+		}
 	}
 
 	[component="chat/main-wrapper"] {
 		flex: 3;
 		padding-bottom: 15px;
+		.alert {
+			margin: 1em;
+		}
 	}
 
 	[component="chat/messages"] {
@@ -60,7 +95,8 @@
 	}
 
 	[component="chat/header"] {
-		border-bottom: 1px solid $gray-200;
+		padding: @panel-heading-padding;
+		border-bottom: 1px solid @modal-header-border-color;
 
 		span {
 			font-weight: 500;
@@ -97,7 +133,7 @@
 			flex: 1;
 			box-shadow: none;
 			border: 0;
-			border: 1px solid $gray-200;
+			border: 1px solid @gray-lighter;
 			border-radius: 0;
 		}
 
@@ -111,7 +147,7 @@
 			right: 5.25em;
 			z-index: 2;
 			bottom: 0;
-			color: $gray-600;
+			color: @gray-light;
 		}
 	}
 }
@@ -124,7 +160,7 @@
 	padding: 0;
 	overflow-x: hidden;
 	overflow-y: auto;
-	border-top: 1px solid $gray-200;
+	border-top: 1px solid @gray-lighter;
 
 	> li.no_active {
 		height: initial;
@@ -136,12 +172,14 @@
 		display: flex;
 		position: relative;
 		clear: both;
-		@include pointer;
+		list-style-type: none;
+		height: 80px;
+		.pointer;
 
 		border-left: 1px solid;
 		border-right: 1px solid;
 		border-bottom: 1px solid;
-		border-color: $gray-200;
+		border-color: @gray-lighter;
 
 		&.typing {
 			.username:after {
@@ -150,7 +188,7 @@
 		}
 
 		&.unread {
-			background: lighten($primary, 35%);
+			background: lighten(@brand-primary, 35%);
 			border-bottom: 0;
 		}
 
@@ -176,7 +214,7 @@
 		}
 
 		&.bg-primary {
-			background: $primary;
+			background: @brand-primary;
 			border-bottom: 0;
 		}
 
@@ -199,7 +237,7 @@
 		}
 
 		a {
-			@include text-ellipsis;
+			.text-ellipsis;
 		}
 
 		p {
@@ -244,6 +282,9 @@
 
 				.avatar {
 					border: 2px solid white;
+					width: 28px;
+					height: 28px;
+					line-height: 26px;
 					vertical-align: bottom;
 				}
 
@@ -255,16 +296,18 @@
 
 		.main-avatar {
 			.avatar {
-				$size: 80px;
-				@include user-icon-style($size, calc($size * 0.6), 0);
-				background: $gray-200;
+				height: 80px;
+				width: 80px;
+				font-size: 40px;
+				border-radius: 0;
+				background: @gray-lighter;
 			}
 		}
 	}
 }
 
 .chat-modal {
-	z-index: $zindex-modal;
+	z-index: @zindex-modal;
 }
 
 /* Chat modal specific styles */
@@ -282,7 +325,7 @@
 				vertical-align: center;
 
 				&.fa-keyboard-o {
-					animation: topic-reply-pulse 2s ease-in infinite;
+					.animation(topic-reply-pulse 2s ease-in infinite);
 				}
 			}
 		}
@@ -309,7 +352,7 @@
 
 .expanded-chat, .chat-modal {
 	.chat-content {
-		@include fix-lists;
+		.fix-lists;
 		overflow-y: auto;
 		overflow-x: hidden;
 		resize: none;
@@ -320,6 +363,9 @@
 		li.chat-message {
 			position: relative;
 			list-style-type: none;
+			font-weight: 300;
+			padding: 0 1.428rem;
+			margin-right: 1.428rem;
 			transition: opacity .5s ease;
 
 			&:first-child {
@@ -333,7 +379,7 @@
 			&[data-break="true"] {
 				padding-top: 1rem;
 				margin-top: 1rem;
-				border-top: 1px solid $gray-200;
+				border-top: 1px solid @gray-lighter;
 			}
 
 			&[data-break="true"]:first-child {
@@ -358,7 +404,7 @@
 			}
 
 			.chat-user-image {
-				@include user-icon-style(32px, 1.6rem, 50%);
+				.user-icon-style(32px, 1.6rem, 50%);
 				float: left;
 			}
 
@@ -367,13 +413,16 @@
 				margin-left: 13px;
 
 				a {
-					color: $body-color;
+					color: @text-color;
 				}
 			}
 
 			.chat-timestamp {
+				color: @gray-light;
+				font-size: 1rem;
 				display: inline-block;
-				user-select: none;
+				margin-left: 10px;
+				.user-select(none);
 			}
 
 			.chat-edited {
@@ -410,10 +459,10 @@
 					display: none;
 
 					position: absolute;
-					bottom: 7px;
-					right: 14px;
-					border: 1px solid $gray-200;
-					box-shadow: 0 6px 12px rgba(0,0,0,.175);
+					bottom: 5px;
+					right: 30px;
+					border: 1px solid @dropdown-border;
+					.box-shadow(0 6px 12px rgba(0,0,0,.175));
 
 					[data-action="restore"] {
 						display: none;
@@ -422,8 +471,7 @@
 
 				&:hover {
 					.message-body {
-						color: $dropdown-link-hover-color;
-						background: $dropdown-link-hover-bg;
+						background: @dropdown-link-hover-bg;
 					}
 
 					.controls {
@@ -436,13 +484,15 @@
 		li.system-message {
 			list-style-type: none;
 			text-align: center;
-			color: $gray-600;
+			color: @gray-light;
+			font-size: 1.25rem;
+			padding: 1rem 0;
 
 			&::before, &::after {
 				display: inline-block;
 				width: 10%;
 				content: '';
-				border-top: 1px solid $gray-200;
+				border-top: 1px solid @gray-lighter;
 				position: relative;
 				top: -0.3rem;
 				margin: 0 2rem;
@@ -451,7 +501,7 @@
 	}
 
 	.user-typing {
-		color: $gray-600;
+		color: @gray-light;
 		margin: 1.428rem 0;
 	}
 
@@ -504,7 +554,7 @@
 }
 
 /* Mobile handling of chat page */
-@include media-breakpoint-down(sm) {
+@media (max-width: @screen-sm) {
 	.page-user-chats {
 		padding-bottom: 0;
 
@@ -516,6 +566,9 @@
 			display: none;
 		}
 
+		.chats-full, .chat-modal {
+			height: calc(100vh - var(--panel-offset));
+		}
 		[component="chat/messages"] {
 			width: calc(100vw);
 		}
@@ -527,8 +580,8 @@
 }
 
 /* Mobile handling of chat modal */
-@include media-breakpoint-down(sm) {
+@media (max-width: @screen-sm-max)  {
 	.chat-modal {
-		z-index: $zindex-popover + 10;
+		z-index: @zindex-popover + 10;
 	}
 }

package/{scss/flags.scss → less/flags.less}

@@ -1,12 +1,12 @@
 .page-flags {
     [component="flags/list"] {
         tr {
-            @include pointer;
+            .pointer;
         }
     }
 
     #flags-daily-wrapper + .panel-footer {
-        @include pointer;
+        .pointer;
     }
 
     [component="flag/reports"] {
@@ -37,7 +37,7 @@
         }
 
         .editing {
-            background-color: $info;
+            background-color: @state-info-bg;
         }
     }
 }

package/{scss/footer.scss → less/footer.less}

@@ -13,5 +13,6 @@
 	&.ajaxifying {
 		-moz-opacity: 0.00;
 		opacity: 0.00;
+		-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	}
 }