nodebb-theme-persona 12.1.5 → 12.1.6

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

@@ -5,7 +5,7 @@
 		}
 	}
 
-	.notification-list {
+	@mixin notification-list() {
 		overflow-x: hidden;
 		overflow-y: auto;
 		max-height: 250px;
@@ -19,10 +19,6 @@
 			list-style-type: none;
 			padding: .75em 0.5em;
 
-			&:hover {
-				background-color: @dropdown-link-hover-bg;
-			}
-
 			&.loading-text, &.no-notifs {
 				justify-content: center;
 
@@ -60,11 +56,11 @@
 			}
 
 			.mark-read {
-				color: @text-muted;
+				color: $text-muted;
 
 				&:after {
 					font-family: "Font Awesome 5 Free";
-					content: @fa-var-circle;
+					content: fa-content($fa-var-circle);
 					font-weight: 400;
 					padding: 4px 1rem;
 					position: relative;
@@ -72,16 +68,16 @@
 				}
 
 				&:hover {
-					color: darken(@text-muted, 10%);
-					.pointer;
+					color: darken($text-muted, 10%);
+					@include pointer;
 				}
 			}
 
 			&.unread {
-				background-color: @state-warning-bg;
+				background-color: $warning;
 
 				&:hover {
-					background-color: darken(@state-warning-bg, 5%);
+					background-color: darken($warning, 5%);
 				}
 
 				.mark-read:after {
@@ -91,11 +87,15 @@
 		}
 	}
 
+	.notification-list {
+		@include notification-list;
+	}
+
 	.chat-list {
-		.notification-list;
+		@include notification-list;
 
 		> li {
-			.pointer;
+			@include pointer;
 			width: 500px;
 			padding: 0;
 			margin: 0;
@@ -114,7 +114,7 @@
 			}
 
 			&:not(:last-child) {
-				border-bottom: 1px solid @dropdown-border;
+				border-bottom: 1px solid $dropdown-border-color;
 			}
 
 			&.no_active a {
@@ -146,23 +146,11 @@
 		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 {
-			.user-icon-style(30px, 1.8rem, 50%);
+			@include user-icon-style(30px, 1.8rem, 50%);
 			border: 0px none;
 
 			span {
@@ -172,22 +160,11 @@
 		}
 	}
 
-	.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;
@@ -199,31 +176,16 @@
 		span {
 			text-overflow: ellipsis;
 			white-space: nowrap;
-			color: @brand-primary;
+			color: $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;
 		}
 	}
 }
@@ -231,9 +193,8 @@
 .breadcrumb {
 	li {
 		max-width: 100%;
-		.text-ellipsis;
+		@include text-ellipsis;
 		position: relative;
-		top: calc(16px / 4);
 	}
 
 	.fa {
@@ -241,11 +202,7 @@
 		color: rgb(153, 153, 153);
 	}
 
-	font-size: 16px;
-	padding: 0;
-	background: none;
-
-	@media (max-width: @screen-xs-max) {
+	@include media-breakpoint-down(sm) {
 		li {
 			display: none;
 		}
@@ -284,29 +241,52 @@
 		width: 350px;
 	}
 }
-
-.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 {
+	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[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;
@@ -315,7 +295,6 @@
 
 #search-form {
 	#search-button {
-		float: right;
 		max-width: 60px;
 		width: auto;
 		transition-property: max-width, padding-left, padding-right;
@@ -331,12 +310,8 @@
 		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;
 
@@ -346,20 +321,14 @@
 
 		input.form-control {
 			white-space: nowrap;
-		}
-
-		.form-group .advanced-search-link {
-			margin: 0;
-			width: 0;
-			position: relative;
-			left: -30px;
+			outline: none;
+			box-shadow: none;
 		}
 	}
 }
 
 body.skin-default .header {
 	.notification-list {
-
 		li {
 			a {
 				color: inherit;
@@ -377,44 +346,6 @@ 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;
@@ -425,21 +356,14 @@ label.dropdown-toggle {
 		padding: 3px 20px;
 		clear: both;
 		font-weight: normal;
-		line-height: @line-height-base;
-		color: @dropdown-link-color;
+		line-height: $line-height-base;
 		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/mixins.less → scss/mixins.scss}

@@ -1,75 +1,34 @@
-.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);
-	}
 
-	&: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 {
+
+@mixin timeline-style() {
 	> [component="post"], .timeline-event {
 		position: relative;	// for absolutely positioned pseudo-element, below
-		border-left: 2px solid lighten(@brand-primary, 30%);
-		margin-left: 2.5rem;
+		border-left: 2px solid lighten($primary, 30%);
+		margin-left: 1.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: -2.5rem;
+			margin-left: -1.5rem;
 		}
 
 		.icon .avatar, .timeline-badge {
 			// Opaque ring
 			position: relative;
 			z-index: 1;
-			box-shadow: 0 0 0 .5rem @body-bg;
+			box-shadow: 0 0 0 ($spacer * .5) $body-bg;
 		}
 	}
 
-	@media (max-width: @screen-sm-max) {
+	@include media-breakpoint-down(sm) {
 		[component="post"] {
 			border: 0;
-			padding: @post-padding 0;
+			padding: $post-padding 0;
 
 			margin-left: initial;
 			> div:not(.content) {
@@ -90,7 +49,7 @@
 				position: absolute;
 				top: 0;
 				left: calc(-0.5rem - 1px);
-				border-bottom: 2px solid lighten(@brand-primary, 30%);
+				border-bottom: 2px solid lighten($primary, 30%);
 			}
 
 			&+:not(.timeline-event):before {
@@ -107,7 +66,7 @@
 		}
 	}
 
-	@media (min-width: @screen-sm) {
+	@include media-breakpoint-up(sm) {
 		.timeline-event {
 			[component="topic/event/delete"] {
 				visibility: hidden;
@@ -118,7 +77,7 @@
 					visibility: visible;
 
 					&:hover {
-						color: @brand-danger;
+						color: $danger;
 					}
 				}
 			}
@@ -135,7 +94,7 @@
 		position: absolute;
 		bottom: 0;
 		left: calc(-0.5rem - 1px);
-		border-bottom: 2px solid lighten(@brand-primary, 30%);
+		border-bottom: 2px solid lighten($primary, 30%);
 	}
 
 	[component="topic/event"], [component="topic/necro-post"] {
@@ -156,16 +115,15 @@
 				padding: 0;
 				margin-left: -17px;
 				margin-right: 17px;
-				color: lighten(@brand-primary, 30%);
-				background-color: @body-bg;
-				border: 2px solid lighten(@brand-primary, 30%);
+				color: lighten($primary, 30%);
+				background-color: $body-bg;
+				border: 2px solid lighten($primary, 30%);
 				border-radius: 50%;
 			}
 
 			.timeline-text {
 				line-height: 32px;
 				text-transform: initial;
-				color: rgba(127,127,127,.5);
 			}
 		}
 	}

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

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

package/{less/modules/alerts.less → scss/modules/alerts.scss}

@@ -25,40 +25,40 @@
 		}
 
 		&.alert-info::before {
-			background-color: @material-info;
+			background-color: $info;
 		}
 
 		&.alert-warning::before {
-			background-color: @material-warning;
+			background-color: $warning;
 		}
 
 		&.alert-success::before {
-			background-color: @material-success;
+			background-color: $success;
 		}
 
 		&.alert-danger::before {
-			background-color: @material-danger;
+			background-color: $danger;
 		}
 
 		&.animate {
 			&.alert-info::before {
-				background-color: lighten(@material-info, 25%);
+				background-color: lighten($info, 25%);
 			}
-			
+
 			&.alert-warning::before {
-				background-color: lighten(@material-warning, 25%);
+				background-color: lighten($warning, 25%);
 			}
-			
+
 			&.alert-success::before {
-				background-color: lighten(@material-success, 25%);
+				background-color: lighten($success, 25%);
 			}
-			
+
 			&.alert-danger::before {
-				background-color: lighten(@material-danger, 25%);
+				background-color: lighten($danger, 25%);
 			}
-			
+
 			&::before {
-				width: ~"calc(100% + 50px)";
+				width: calc(100% + 50px);
 			}
 		}
 
@@ -76,23 +76,23 @@
 		}
 
 		&.alert-info {
-			color: @material-info;
-			border-color: @material-info;
+			color: $info;
+			border-color: $info;
 		}
 
 		&.alert-warning {
-			color: @material-warning;
-			border-color: @material-warning;
+			color: $warning;
+			border-color: $warning;
 		}
 
 		&.alert-success {
-			color: @material-success;
-			border-color: @material-success;
+			color: $success;
+			border-color: $success;
 		}
 
 		&.alert-danger {
-			color: @material-danger;
-			border-color: @material-danger;
+			color: $danger;
+			border-color: $danger;
 		}
 	}
 }

package/{less/modules/composer-default.less → scss/modules/composer-default.scss}

@@ -5,10 +5,10 @@
 		p {
 			margin: 0 0 18px;
 		}
-		
+
 		blockquote {
 			font-size: 12px;
-			
+
 			p {
 				margin-bottom: 0px;
 			}

package/{less/modules/cookie-consent.less → scss/modules/cookie-consent.scss}

@@ -6,7 +6,7 @@
     padding-left: 1rem;
     width: 100%;
     background: rgba(240,240,240,.8);
-    z-index: @zindex-navbar-fixed;
+    z-index: $zindex-popover;
     a {
         font-weight: bold;
     }