nodebb-theme-persona 12.1.4 → 13.0.0

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

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

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

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

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

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

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

@@ -1,31 +1,21 @@
-.group-label {
-	display: inline-block;
-	text-transform: uppercase;
-	vertical-align: -5px;
-	padding: 4px;
-	border-radius: 2px;
-	max-width: 150px;
-	overflow-x: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	line-height: 1.1;
-}
-
 .groups.details {
 	margin-top: 200px;
 
 	[component="groups/cover"] {
 		background-size: cover;
 		background-repeat: no-repeat;
-		min-height: 200px;
-		position: relative;
-		margin-bottom: 1em;
 		background-origin: content-box;
+
+		min-height: 200px;
 		width: 100%;
-		top: calc(var(--panel-offset) - 20px);
+		margin-bottom: 1em;
+		padding-left: 0;
+		padding-right: 0;
+
 		position: absolute;
+		top: var(--panel-offset);
+		right: 0;
 		left: auto;
-		right: 0px;
 
 		&:hover {
 			.controls {
@@ -38,7 +28,7 @@
 			min-height: 200px;
 			line-height: 200px;
 			opacity: 0;
-			.transition(opacity .15s linear);
+			@include transition(opacity .15s linear);
 			cursor: pointer;
 			pointer-events: none;
 
@@ -87,8 +77,8 @@
 			top: 1em;
 			right: 2em;
 			opacity: 1;
-			background-color: @brand-primary;
-			color: @gray-lighter;
+			background-color: $primary;
+			color: $gray-200;
 			padding: 0.5em;
 			font-weight: bold;
 
@@ -122,10 +112,6 @@
 		margin-top: 0;
 	}
 
-	.owner-controls {
-		margin-top: -6px;
-	}
-
 	.post-body {
 		.topic-title, p {
 			overflow-y: hidden;
@@ -133,7 +119,7 @@
 		}
 	}
 
-	@media (min-width: @screen-md-min) {
+	@include media-breakpoint-up(md) {
 		margin-top: 300px;
 
 		[component="groups/cover"] {
@@ -151,28 +137,18 @@
 			padding: .2em .3em .1em;
 		}
 	}
-
-	.options {
-		.user-title-option span.label {
-			.group-label;
-		}
-	}
 }
 
 .groups.list {
 	[component="groups/summary"] {
-		.panel-body {
-			min-height: 72px;
-		}
-
 		.list-cover {
 			display: block;
 			background-size: cover;
 			min-height: 125px;
 			background-position: 50% 50%;
-			.pointer;
+			@include pointer;
 
-			h3 {
+			h5 {
 				background-color: rgba(0,0,0,0.5);
 				display: inline-block;
 				padding: 0.25em 0.5em;