nodebb-theme-persona 12.1.6 → 12.1.8

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

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

package/less/modules/bottom-sheet.less

@@ -0,0 +1,60 @@
+.bottom-sheet {
+	@media (max-width: @screen-sm-max) {
+		.dropdown-menu {
+			display: block;
+			visibility: hidden;
+
+			position: fixed;
+			left: 0 !important;
+			right: 0 !important;
+			bottom: 0;
+
+			margin: 0 -1px -1px -1px;
+			padding: 0 5px;
+			max-height: 60%;
+
+			box-shadow: 0 2px 6px rgba(0,0,0,0.35);
+			overflow: auto;
+			-webkit-overflow-scrolling: touch;
+			transform: translate3d(0, 350px, 0);
+			transition: transform 0.3s, visibility 0s 0.3s;
+			z-index: @zindex-popover;
+			padding: 5px 0 10px;
+
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+
+			> li {
+				> a {
+					padding: 10px 20px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+
+				&.divider {
+					padding: 0;
+				}
+
+				&.active {
+					background-color: @btn-primary-bg;
+					color: @btn-primary-color;
+				}
+			}
+		}
+
+		&.open {
+			.dropdown-menu {
+				transform: none;
+				visibility: visible;
+				transition-delay: 0s;
+				top: auto;
+				width: auto;
+			}
+		}
+
+		.dropdown-backdrop {
+			background-color: rgba(0, 0, 0, .3);
+		}
+	}
+}

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

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

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

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

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

@@ -1,7 +1,7 @@
 .persona-fab {
 	box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.156863), 0px 2px 10px 0px rgba(0, 0, 0, 0.117647);
 
-	background-color: $primary;
+	background-color: @brand-primary;
 	border: none;
 	border-radius: 50%;
 	cursor: pointer;
@@ -25,7 +25,7 @@
 	}
 
 	&.plus {
-		background-color: $success;
+		background-color: @material-success;
 		> span > span {
 			background-color: white;
 		}

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

@@ -232,7 +232,7 @@ header .btn-morph > span > span {
 	display: block;
 	position: absolute;
 	content: "";
-	background-color: $gray-200;
+	background-color: @gray-lighter;
 	border-radius: 100%;
 	width: 100%;
 	height: 100%;

package/less/modules/nprogress.less

@@ -0,0 +1,80 @@
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #29d;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+@media (max-width: @screen-xs-max) {
+  #nprogress .spinner {
+    bottom: 15px;
+    right: 15px;
+    top: initial;
+  }
+}
+
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #29d;
+  border-left-color: #29d;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+

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

@@ -1,7 +1,7 @@
 @import "../keyframes";
 
 .modal-unfocused {
-	z-index: $zindex-modal - 5 !important;
+	z-index: @zindex-modal - 5 !important;
 }
 
 .taskbar {
@@ -10,7 +10,7 @@
 	right: auto;
 
 	margin-top: 0;
-	@include transition(.15s ease-in opacity);
+	.transition(.15s ease-in opacity);
 
 	background: none;
 	border: none;
@@ -68,7 +68,6 @@
 			}
 
 			a {
-				display: inline-block;
 				padding: 3px 15px;
 				font-size: 20px;
 
@@ -77,7 +76,7 @@
 				}
 
 				&:focus, &:hover {
-					color: $gray-200;
+					color: @gray-lighter;
 				}
 
 				border-radius: 50%;
@@ -113,14 +112,14 @@
 
 			&.taskbar-composer {
 				a, a:hover, a:focus, a:active {
-					background-color: $danger;
+					background-color: #f44336;
 					background-size: cover;
 				}
 			}
 
 			&.taskbar-chat {
 				a, a:hover, a:focus, a:active {
-					background: $primary;
+					background: @brand-primary;
 				}
 
 				&.new:after {
@@ -130,14 +129,14 @@
 					top: 0px;
 					font-size: 10px;
 					text-align: center;
-					border: 1px solid $danger;
+					border: 1px solid #890405;
 					color: #fff;
 					font-weight: bold;
 					min-width: 20px;
-					border-radius: 4px;
-					background: $danger;
+					.border-radius(4px);
+					background: #c91106;
 					padding: 1px 2px;
-					font-family: $font-family-sans-serif;
+					font-family: @font-family-sans-serif;
 				}
 
 				&.new[data-content="0"]:after {
@@ -152,7 +151,7 @@
 					i {
 						font-size: 18px;
 						line-height: 42px;
-						color: $body-color;
+						color: #FFF;
 					}
 				}
 			}

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

@@ -1,14 +1,16 @@
+@import "mixins";
+
 noscript {
-	@mixin default() {
+	.default {
 		list-style-type: none;
 		padding: 1em;
 		margin-bottom: 1em;
-		@include zebra;
+		.zebra;
 	}
 
 	.categories {
 		li {
-			@include default;
+			.default;
 
 			.icon {
 				float: left;
@@ -27,7 +29,7 @@ noscript {
 
 	.topics {
 		li {
-			@include default;
+			.default;
 		}
 
 		.timestamp {
@@ -61,7 +63,7 @@ noscript {
 
 	.posts {
 		li {
-			@include default;
+			.default;
 
 			.profile {
 				text-align: center;

package/less/notifications.less

@@ -0,0 +1,38 @@
+.notifications-list {
+	margin-top: 1em;
+	padding: 0;
+
+	li {
+		clear: both;
+		list-style-type: none;
+		padding: 1em;
+		margin-bottom: 0.5em;
+		.zebra;
+		.pointer;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+
+		&.unread {
+			background: #fefbed;
+		}
+
+		.timestamp {
+			font-size: 0.8em;
+		}
+
+		a {
+			display: block;
+			.text-ellipsis;
+		}
+
+		p {
+			margin: 0 0 0 30px;
+		}
+
+		.user-img {
+			.user-icon-style(24px, 1rem, 50%);
+		}
+	}
+}

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

@@ -1,6 +1,6 @@
 @import "variables";
+
 @import "style";
-@import "mixins";
 
 @import "topic";
 @import "category";
@@ -11,18 +11,23 @@
 @import "account";
 @import "groups";
 @import "chats";
+@import "notifications";
 @import "search";
 @import "topics_list";
+@import "users";
 @import "outgoing";
 @import "footer";
 @import "posts_list";
 @import "register";
 @import "flags";
+@import "post-queue";
+@import "ip-blacklist";
 
 @import "mobile";
 
 @import "helpers";
 @import "keyframes";
+@import "rtl";
 
 @import "modules/nprogress";
 @import "modules/usercard";
@@ -32,5 +37,12 @@
 @import "modules/morph";
 @import "modules/composer-default";
 @import "modules/cookie-consent";
+@import "modules/bottom-sheet";
 @import "modules/necro-post";
 
+
+@material-primary:         #337ab7;
+@material-success:         #4CAF50;
+@material-info:            #717484;
+@material-warning:         #ff6d00;
+@material-danger:          #F44336;

package/less/post-queue.less

@@ -0,0 +1,19 @@
+/*
+	Post queue page CSS
+	  - Originally in ACP
+	  - Now available in front-end for global mods as well
+*/
+.posts-list {
+    .topic-title {
+        word-break: break-word;
+    }
+    .post-content {
+        word-break: break-word;
+    }
+    .post-content-editable {
+        textarea {
+            width: 100%;
+            height: 300px;
+        }
+    }
+}

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

@@ -1,7 +1,9 @@
 .posts-list {
+	list-style-type: none;
 	padding-left: 0px;
 
 	.posts-list-item {
+		@icon-radius: 14px;
 		width: 100%;
 		margin-bottom: 0px;
 
@@ -15,21 +17,23 @@
 		}
 
 		.user-img {
+			.user-icon-style(@icon-radius * 2px, 1.5rem, 50%);
 			position: absolute;
 			top: 50%;
-			margin-top: -14px;
-			margin-left: -14px;
+			margin-top: -1 * @icon-radius;
+			margin-left: -1 * @icon-radius;
 		}
 
 		a {
 			span {
 				overflow: hidden;
+				height: 16px;
 				padding-left: 8px;
 			}
 		}
 
 		.topic-title {
-			color: $gray-800;
+			color: @gray-dark;
 			font-weight: 900;
 			font-size: 125%;
 			text-decoration: underline;
@@ -38,7 +42,7 @@
 		.topic-category {
 			text-transform: uppercase;
 			font-size: 10px;
-			color: $gray-600;
+			color: lighten(@gray-base, 65%);
 			margin-top: 6px;
 			margin-right: 10px;
 			margin-bottom: 25px;
@@ -47,7 +51,7 @@
 
 			a {
 				font-weight: 900;
-				color: $gray-600;
+				color: @gray-light;
 			}
 		}
 
@@ -78,9 +82,8 @@
 		}
 
 		.post-body {
-			border-right: 2px solid $primary;
+			border-right: 2px solid @brand-primary;
 			min-height: 100px;
-			position: relative; // to handle abs. positioning in .post-info child
 		}
 
 		.post-info {
@@ -94,6 +97,7 @@
 			> a {
 				position: relative;
 				.user-img {
+					margin-top: -3px;
 					text-align: center;
 					padding: 0;
 				}
@@ -101,11 +105,10 @@
 
 			.post-author {
 				padding-left: 25px;
-				margin-top: -14px;
-				color: $gray-600;
+				color: lighten(@gray-base, 65%);
 
 				a {
-					color: $gray-600;
+					color: @gray-light;
 					font-weight: 900;
 
 				}
@@ -121,7 +124,7 @@
 	overflow-y: none;
 }
 
-@include media-breakpoint-down(sm) {
+@media (max-width: @screen-sm-min) {
 	.posts-list .posts-list-item .post-info {
 		width: 100px;
 	}

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

@@ -1,6 +1,7 @@
 .page-register-complete {
 	.tos {
-		background: $body-bg;
+		background: @body-bg;
+		color: @text-color;
 		max-height: 350px;
 		margin-top: 5px;
 		overflow-y: scroll;
@@ -13,6 +14,10 @@
 .register-block {
 	margin-top: 15px;
 
+	.help-block {
+		font-size: 13px;
+	}
+
 	.register-success {
 		.form-control {
 			border-color: #5cb85c;
@@ -64,7 +69,7 @@
 	}
 }
 
-@include media-breakpoint-down(sm) {
+@media (max-width: @screen-xs-max) {
 	.alt-login-block {
 		margin-bottom: 20px;
 	}