nodebb-theme-persona 12.1.6 → 12.1.7

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

@@ -1,21 +1,31 @@
+.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;
-		background-origin: content-box;
-
 		min-height: 200px;
-		width: 100%;
+		position: relative;
 		margin-bottom: 1em;
-		padding-left: 0;
-		padding-right: 0;
-
+		background-origin: content-box;
+		width: 100%;
+		top: calc(var(--panel-offset) - 20px);
 		position: absolute;
-		top: var(--panel-offset);
-		right: 0;
 		left: auto;
+		right: 0px;
 
 		&:hover {
 			.controls {
@@ -28,7 +38,7 @@
 			min-height: 200px;
 			line-height: 200px;
 			opacity: 0;
-			@include transition(opacity .15s linear);
+			.transition(opacity .15s linear);
 			cursor: pointer;
 			pointer-events: none;
 
@@ -77,8 +87,8 @@
 			top: 1em;
 			right: 2em;
 			opacity: 1;
-			background-color: $primary;
-			color: $gray-200;
+			background-color: @brand-primary;
+			color: @gray-lighter;
 			padding: 0.5em;
 			font-weight: bold;
 
@@ -112,6 +122,10 @@
 		margin-top: 0;
 	}
 
+	.owner-controls {
+		margin-top: -6px;
+	}
+
 	.post-body {
 		.topic-title, p {
 			overflow-y: hidden;
@@ -119,7 +133,7 @@
 		}
 	}
 
-	@include media-breakpoint-up(md) {
+	@media (min-width: @screen-md-min) {
 		margin-top: 300px;
 
 		[component="groups/cover"] {
@@ -137,18 +151,28 @@
 			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%;
-			@include pointer;
+			.pointer;
 
-			h5 {
+			h3 {
 				background-color: rgba(0,0,0,0.5);
 				display: inline-block;
 				padding: 0.25em 0.5em;

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

@@ -5,7 +5,7 @@
 		}
 	}
 
-	@mixin notification-list() {
+	.notification-list {
 		overflow-x: hidden;
 		overflow-y: auto;
 		max-height: 250px;
@@ -19,6 +19,10 @@
 			list-style-type: none;
 			padding: .75em 0.5em;
 
+			&:hover {
+				background-color: @dropdown-link-hover-bg;
+			}
+
 			&.loading-text, &.no-notifs {
 				justify-content: center;
 
@@ -56,11 +60,11 @@
 			}
 
 			.mark-read {
-				color: $text-muted;
+				color: @text-muted;
 
 				&:after {
 					font-family: "Font Awesome 5 Free";
-					content: fa-content($fa-var-circle);
+					content: @fa-var-circle;
 					font-weight: 400;
 					padding: 4px 1rem;
 					position: relative;
@@ -68,16 +72,16 @@
 				}
 
 				&:hover {
-					color: darken($text-muted, 10%);
-					@include pointer;
+					color: darken(@text-muted, 10%);
+					.pointer;
 				}
 			}
 
 			&.unread {
-				background-color: $warning;
+				background-color: @state-warning-bg;
 
 				&:hover {
-					background-color: darken($warning, 5%);
+					background-color: darken(@state-warning-bg, 5%);
 				}
 
 				.mark-read:after {
@@ -87,15 +91,11 @@
 		}
 	}
 
-	.notification-list {
-		@include notification-list;
-	}
-
 	.chat-list {
-		@include notification-list;
+		.notification-list;
 
 		> li {
-			@include pointer;
+			.pointer;
 			width: 500px;
 			padding: 0;
 			margin: 0;
@@ -114,7 +114,7 @@
 			}
 
 			&:not(:last-child) {
-				border-bottom: 1px solid $dropdown-border-color;
+				border-bottom: 1px solid @dropdown-border;
 			}
 
 			&.no_active a {
@@ -146,11 +146,23 @@
 		display: none !important; //temp
 	}
 
+	.navbar-toggle {
+		.notification-icon {
+			position: absolute;
+			left: -13px;
+			top: 14px;
+
+			&:before {
+				display: none;
+			}
+		}
+	}
+
 	#user_dropdown {
 		padding: 9px 15px;
 
 		img, .user-icon {
-			@include user-icon-style(30px, 1.8rem, 50%);
+			.user-icon-style(30px, 1.8rem, 50%);
 			border: 0px none;
 
 			span {
@@ -160,11 +172,22 @@
 		}
 	}
 
+	.forum-title {
+		margin: 0px;
+	}
+
 	.forum-logo {
+		float: left;
 		max-height: 50px;
 		width: auto;
 	}
 
+	@media (max-width: @screen-xs-max) {
+		.forum-logo {
+			margin-left: 15px;
+		}
+	}
+
 	.header-topic-title {
 		text-align: right;
 		padding: 15px 15px;
@@ -176,16 +199,31 @@
 		span {
 			text-overflow: ellipsis;
 			white-space: nowrap;
-			color: $primary;
+			color: @brand-primary;
 		}
 	}
 
 	.notif-dropdown-link {
 		border-top: 1px solid rgba(163, 163, 163, 0.5);
+		.btn-group-justified {
+			table-layout: auto;
+		}
 		a {
 			text-align: center;
 			padding: 0.5em 0.5em;
 			font-weight: 600;
+			color: @dropdown-link-color;
+
+			&:hover {
+				color: @dropdown-link-hover-color;
+				background: @dropdown-link-hover-bg;
+			}
+		}
+	}
+
+	#search-form {
+		.advanced-search-link {
+			margin-left: -30px;
 		}
 	}
 }
@@ -193,8 +231,9 @@
 .breadcrumb {
 	li {
 		max-width: 100%;
-		@include text-ellipsis;
+		.text-ellipsis;
 		position: relative;
+		top: calc(16px / 4);
 	}
 
 	.fa {
@@ -202,7 +241,11 @@
 		color: rgb(153, 153, 153);
 	}
 
-	@include media-breakpoint-down(sm) {
+	font-size: 16px;
+	padding: 0;
+	background: none;
+
+	@media (max-width: @screen-xs-max) {
 		li {
 			display: none;
 		}
@@ -241,52 +284,29 @@
 		width: 350px;
 	}
 }
-.unread-count {
-	position: relative;
-	&:after {
-		position: absolute;
-		left: 10px;
-		top: -10px;
-		font-size: 10px;
-		text-align: center;
-		border: 1px solid #890405;
-		color: #fff;
-		font-weight: bold;
-		min-width: 16px;
-		-webkit-border-radius: 3px;
-		-moz-border-radius: 3px;
-		border-radius: 3px;
-		background: #c91106;
-		padding: 1px 2px;
-		font-family: $font-family-sans-serif;
-	}
+
+.unread-count:after {
+	position: absolute;
+	left: 23px;
+	top: 10px;
+	font-size: 10px;
+	text-align: center;
+	border: 1px solid #890405;
+	color: #fff;
+	font-weight: bold;
+	min-width: 16px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+	background: #c91106;
+	padding: 1px 2px;
+	font-family: @font-family-sans-serif;
 }
 
 .unread-count[data-content]:not([data-content=""]):not([data-content="0"]):after {
 	content: attr(data-content);
 }
 
-.navbar-toggler {
-	.notification-icon {
-		position: absolute;
-		&[component="unread/icon"]::after {
-			left: -10px;
-		}
-		&[component="notifications/icon"]:after {
-			left: -5px;
-			top: -5px;
-		}
-		&[component="chat/icon"]:after {
-			left: 20px;
-			top: -5px;
-		}
-
-		&:before {
-			display: none;
-		}
-	}
-}
-
 .slideout-menu .unread-count:after {
 	position: relative;
 	left: -6px;
@@ -295,6 +315,7 @@
 
 #search-form {
 	#search-button {
+		float: right;
 		max-width: 60px;
 		width: auto;
 		transition-property: max-width, padding-left, padding-right;
@@ -310,8 +331,12 @@
 		padding-right: 0;
 	}
 	#search-fields {
+		width: auto;
+		max-width: 100%;
 		overflow: hidden;
 		transition: max-width 0.2s ease 0s;
+		max-height: 42px;
+		float: right;
 		display: inline-block !important;
 		visibility: visible !important;
 
@@ -321,14 +346,20 @@
 
 		input.form-control {
 			white-space: nowrap;
-			outline: none;
-			box-shadow: none;
+		}
+
+		.form-group .advanced-search-link {
+			margin: 0;
+			width: 0;
+			position: relative;
+			left: -30px;
 		}
 	}
 }
 
 body.skin-default .header {
 	.notification-list {
+
 		li {
 			a {
 				color: inherit;
@@ -346,6 +377,44 @@ label.dropdown-toggle {
 	display: block;
 }
 
+.navbar-default {
+	.navbar-nav {
+		> li > label {
+			color: @navbar-default-link-color;
+
+			&:hover,
+			&:focus {
+				color: @navbar-default-link-hover-color;
+				background-color: @navbar-default-link-hover-bg;
+			}
+		}
+		> .active > label {
+			&,
+			&:hover,
+			&:focus {
+				color: @navbar-default-link-active-color;
+				background-color: @navbar-default-link-active-bg;
+			}
+		}
+		> .disabled > label {
+			&,
+			&:hover,
+			&:focus {
+				color: @navbar-default-link-disabled-color;
+				background-color: @navbar-default-link-disabled-bg;
+			}
+		}
+		> .open > label {
+			&,
+			&:hover,
+			&:focus {
+				background-color: @navbar-default-link-active-bg;
+				color: @navbar-default-link-active-color;
+			}
+		}
+	}
+}
+
 .dropdown-menu > li > form {
 	> button, > .btn-link {
 		text-align: left;
@@ -356,14 +425,21 @@ label.dropdown-toggle {
 		padding: 3px 20px;
 		clear: both;
 		font-weight: normal;
-		line-height: $line-height-base;
+		line-height: @line-height-base;
+		color: @dropdown-link-color;
 		white-space: nowrap; // prevent links from randomly breaking onto new lines
 
 		&:hover,
 		&:focus {
 			text-decoration: none;
-			color: $dropdown-link-hover-color;
-			background-color: $dropdown-link-hover-bg;
+			color: @dropdown-link-hover-color;
+			background-color: @dropdown-link-hover-bg;
 		}
 	}
 }
+
+html[data-dir="rtl"] {
+	.dropdown-menu > li > form > button {
+		text-align: right;
+	}
+}

package/less/ip-blacklist.less

@@ -0,0 +1,7 @@
+#blacklist-rules {
+	width: 100%;
+	height: 357px;
+	display: block;
+	border: 1px solid #eee;
+	padding: 5px 10px;
+}

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

@@ -1,34 +1,75 @@
+.no-select {
+	.user-select(none);
+}
+
+.pointer {
+	cursor: pointer;
+	*cursor: hand;
+}
+
+.inline-block {
+	display: inline-block;
+	*display: inline;
+	zoom: 1;
+}
+
+.clear {
+	clear: both;
+}
+
+.zebra {
+	&:nth-child(even) {
+		background: rgba(191,191,191,0.2);
+	}
 
-
-@mixin timeline-style() {
+	&:nth-child(odd) {
+		background: rgba(223,223,223,0.2);
+	}
+}
+
+.border-radius (@radius: 5px) {
+	-webkit-border-radius: @radius;
+	-moz-border-radius: @radius;
+	-ms-border-radius: @radius;
+	-o-border-radius: @radius;
+	border-radius: @radius;
+}
+
+.text-ellipsis {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.timeline-style {
 	> [component="post"], .timeline-event {
 		position: relative;	// for absolutely positioned pseudo-element, below
-		border-left: 2px solid lighten($primary, 30%);
-		margin-left: 1.5rem;
+		border-left: 2px solid lighten(@brand-primary, 30%);
+		margin-left: 2.5rem;
 
 		&:not(:last-child) {
-			padding-bottom: $post-padding;
+			padding-bottom: @post-padding;
 		}
 		&:not(:first-child) {
-			padding-top: $post-padding;
+			padding-top: @post-padding;
 		}
 
 		> div:not(.content) {
-			margin-left: -1.5rem;
+			margin-left: -2.5rem;
 		}
 
 		.icon .avatar, .timeline-badge {
 			// Opaque ring
 			position: relative;
 			z-index: 1;
-			box-shadow: 0 0 0 ($spacer * .5) $body-bg;
+			box-shadow: 0 0 0 .5rem @body-bg;
 		}
 	}
 
-	@include media-breakpoint-down(sm) {
+	@media (max-width: @screen-sm-max) {
 		[component="post"] {
 			border: 0;
-			padding: $post-padding 0;
+			padding: @post-padding 0;
 
 			margin-left: initial;
 			> div:not(.content) {
@@ -49,7 +90,7 @@
 				position: absolute;
 				top: 0;
 				left: calc(-0.5rem - 1px);
-				border-bottom: 2px solid lighten($primary, 30%);
+				border-bottom: 2px solid lighten(@brand-primary, 30%);
 			}
 
 			&+:not(.timeline-event):before {
@@ -66,7 +107,7 @@
 		}
 	}
 
-	@include media-breakpoint-up(sm) {
+	@media (min-width: @screen-sm) {
 		.timeline-event {
 			[component="topic/event/delete"] {
 				visibility: hidden;
@@ -77,7 +118,7 @@
 					visibility: visible;
 
 					&:hover {
-						color: $danger;
+						color: @brand-danger;
 					}
 				}
 			}
@@ -94,7 +135,7 @@
 		position: absolute;
 		bottom: 0;
 		left: calc(-0.5rem - 1px);
-		border-bottom: 2px solid lighten($primary, 30%);
+		border-bottom: 2px solid lighten(@brand-primary, 30%);
 	}
 
 	[component="topic/event"], [component="topic/necro-post"] {
@@ -115,15 +156,16 @@
 				padding: 0;
 				margin-left: -17px;
 				margin-right: 17px;
-				color: lighten($primary, 30%);
-				background-color: $body-bg;
-				border: 2px solid lighten($primary, 30%);
+				color: lighten(@brand-primary, 30%);
+				background-color: @body-bg;
+				border: 2px solid lighten(@brand-primary, 30%);
 				border-radius: 50%;
 			}
 
 			.timeline-text {
 				line-height: 32px;
 				text-transform: initial;
+				color: rgba(127,127,127,.5);
 			}
 		}
 	}

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

@@ -5,7 +5,7 @@
 }
 
 /* iPhone 5 and other such devices */
-@include media-breakpoint-down(sm) {
+@media (max-width: @screen-sm-max) {
 	.chat-modal {
 		width: 100%;
 		height: 100%;
@@ -33,7 +33,7 @@
 	}
 }
 
-@include media-breakpoint-down(md) {
+@media (max-width: @screen-md-max) {
 	#panel {
 		background-color: inherit;
 		min-height: 100%;
@@ -50,6 +50,9 @@
 		line-height: 30px;
 		border: none;
 
+		html[data-dir="rtl"] button& {
+			margin-left: 0;
+		}
 		&#mobile-menu {
 			.unread-count::after {
 				left: 32px;
@@ -67,7 +70,7 @@
 			}
 		}
 	}
-	.navbar .navbar-search {
+	.navbar-header .navbar-search {
 		input[name="term"] {
 			width: 150px;
 		}
@@ -95,8 +98,10 @@
 				a {
 					height: 100%;
 					padding-top: 15px;
-					&.active {
-						background-color: $dark;
+				}
+				&.active {
+					a {
+						background-color: #1D1F20;
 					}
 				}
 			}
@@ -105,7 +110,8 @@
 
 	.slideout-menu {
 		z-index: 10000 !important;
-		background-color: $dark;
+		background-color: #1D1F20;
+		background-image: linear-gradient(145deg, #1D1F20, #404348);
 
 		a, button {
 			color: #fff;
@@ -115,10 +121,7 @@
 				text-decoration: underline;
 			}
 		}
-		.nav-item .dropdown-menu {
-			width: 100%;
-			background-color: $dark;
-		}
+
 		.chat-list {
 			max-height: 100%;
 
@@ -143,8 +146,10 @@
 					left: 0;
 
 					.avatar {
-						$size: 40px;
-						@include user-icon-style($size, calc($size * 0.6), 0);
+						height: 40px;
+						width: 40px;
+						font-size: 20px;
+						border-radius: 0;
 					}
 				}
 
@@ -310,7 +315,7 @@
 		z-index: 1;
 
 		img, .user-icon {
-			@include user-icon-style(70px, 4rem);
+			.user-icon-style(70px, 4rem);
 			position: absolute;
 			bottom: -22px;
 			left: 93px;