nodebb-theme-persona 12.1.4 → 13.0.0

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

@@ -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: @brand-primary;
+	background-color: $primary;
 	border: none;
 	border-radius: 50%;
 	cursor: pointer;
@@ -25,7 +25,7 @@
 	}
 
 	&.plus {
-		background-color: @material-success;
+		background-color: $success;
 		> span > span {
 			background-color: white;
 		}

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

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

package/scss/modules/nprogress.scss

@@ -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;
+}
+
+@include media-breakpoint-down(sm) {
+	#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/{less/modules/taskbar.less → scss/modules/taskbar.scss}

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

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

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

package/scss/overrides.scss

@@ -0,0 +1,44 @@
+// only overrides to bs5 variables here
+
+// TODO: decide if we should readd this, persona modified bootstrap to increase padding
+// $input-btn-padding-y:         .625rem !default;
+// $input-btn-padding-x:         1rem !default;
+
+$navbar-nav-link-padding-x: 0.875rem!default;
+
+// persona colors
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$primary: darken(#428bca, 6.5%) !default;
+$secondary: $gray-600 !default;
+$success: #5cb85c !default;
+$info: #5bc0de !default;
+$warning: #f0ad4e !default;
+$danger: #d9534f !default;
+$light: $gray-100 !default;
+$dark: $gray-900 !default;
+$link-decoration:none !default;
+
+// font
+$font-family-sans-serif:  -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+// BS5 default is 1rem(16px)
+$font-size-base: 0.875rem!default;
+
+// no rounded in persona
+$enable-rounded: false;
+
+// no caret on dropdown-toggle
+$enable-caret: false;
+
+// disable smooth scroll, this makes window.scrollTo(0,0) in ajaxify.js take x milliseconds
+$enable-smooth-scroll: false;

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

@@ -1,6 +1,6 @@
 @import "variables";
-
 @import "style";
+@import "mixins";
 
 @import "topic";
 @import "category";
@@ -11,23 +11,18 @@
 @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";
@@ -37,12 +32,5 @@
 @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/posts_list.less → scss/posts_list.scss}

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

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

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

package/scss/search.scss

@@ -0,0 +1,39 @@
+.search-result-title {
+	font-weight: 600;
+}
+
+.search-result-text {
+	max-height: 250px;
+	overflow: hidden;
+	position: relative;
+
+	h4, p {
+		overflow-y: hidden;
+	}
+}
+
+.topic-search {
+	position: fixed;
+	top: 60px;
+	right: 10px;
+
+	button {
+		padding: 4px 6px;
+	}
+}
+
+@include media-breakpoint-down(sm) {
+	.quick-search-container {
+		left: 0px;
+		right: 0px;
+	}
+}
+
+.quick-search-results, .search-results {
+	.post-info {
+		font-size: 12px;
+		.category-item .icon {
+			margin-top: -3px;
+		}
+	}
+}

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

@@ -7,13 +7,9 @@ body {
 	min-height: 100%;
 }
 
-#panel {
-	padding-top: var(--panel-offset);
-}
-
-@media (max-width: @screen-xs-max) {
+@include media-breakpoint-down(sm) {
 	.slideout-panel {
-		min-height: 100vh;
+ 		min-height: 100vh;
 	}
 }
 
@@ -42,17 +38,13 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 		vertical-align: middle;
 		background: transparent;
 		margin: 0.25em;
-		.pointer;
-		.inline-block;
+		@include pointer;
+		@include inline-block;
 	}
 }
 
-.jumbotron {
-	word-wrap: break-word;
-}
-
 #content {
-	padding-bottom:20px;
+	padding-bottom: 20px;
 	-webkit-transition: opacity 150ms linear;
 	-moz-transition: opacity 150ms linear;
 	-ms-transition: opacity 150ms linear;
@@ -62,7 +54,6 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 	&.ajaxifying {
 		-moz-opacity: 0;
 		opacity: 0;
-		-ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 	}
 }
 
@@ -71,19 +62,19 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 	vertical-align: middle;
 
 	&.online {
-		color: @material-success;
+		color: $success;
 	}
 
 	&.away {
-		color: @material-warning;
+		color: $warning;
 	}
 
 	&.dnd {
-		color: @material-danger;
+		color: $danger;
 	}
 
 	&.offline {
-		color: @gray;
+		color: $gray-600;
 	}
 }
 
@@ -97,7 +88,7 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 }
 
 .topic .topic-item.highlight, .category .category-item.highlight {
-	background-color: lighten(@brand-info, 20%);
+	background-color: lighten($info, 20%);
 }
 
 .fa-facebook-square {
@@ -143,6 +134,16 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 	}
 }
 
+.caret {
+    display: inline-block;
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    border-top: 4px dashed;
+    border-right: 4px solid transparent;
+    border-left: 4px solid transparent;
+}
+
 .fade-out {
 	position: absolute;
 	top: 190px;
@@ -202,30 +203,6 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 	background-image: -o-linear-gradient(top, transparent, #2b3e50);
 }
 
-.skin-darkly, .skin-cyborg {
-	[component="composer"] {
-		background: #333;
-
-		.title, .preview, textarea {
-			background-color: #303030;
-			color: #fff;
-		}
-
-		textarea {
-			outline: none;
-			border-color: #000;
-		}
-
-		.formatting-bar .formatting-group li, .formatting-bar span {
-			color: #fff;
-		}
-
-		.formatting-bar .formatting-group li:focus, .formatting-bar .formatting-group li:hover {
-			background-color: #444;
-		}
-	}
-}
-
 .icon-container {
 	.row {
 		margin: 0;
@@ -233,7 +210,7 @@ a:hover, .btn-link:hover, .btn-link:active, .btn-link:focus {
 			width:20px;
 			height:20px;
 			margin: 1px;
-			.pointer;
+			@include pointer();
 			line-height: 20px;
 			text-align: center;
 
@@ -261,7 +238,6 @@ a.permalink {
 	&:hover,
 	&:focus,
 	&:active {
-		color: @gray-light;
 		text-decoration: underline;
 	}
 }
@@ -275,7 +251,7 @@ a.permalink {
 	pointer-events: none;
 }
 
-@media (max-width: @screen-sm-max) {
+@include media-breakpoint-down(sm) {
 	.form-control {
 		font-size: 16px;
 	}
@@ -294,4 +270,4 @@ a.permalink {
 		top: 0;
 		left: 0;
 	}
-}
+}

package/scss/tags.scss

@@ -0,0 +1,11 @@
+
+.tag-list {
+	.tag {
+		text-transform: uppercase;
+		font-size: 10px;
+		background: $gray-200;
+		color: $gray-600;
+		padding: 5px;
+		white-space: nowrap;
+	}
+}