chore: v3.0.0-alpha.1 🎉

see https://github.com/twbs/bootstrap/issues/32372

Gruntfile.js

@@ -54,14 +54,9 @@ module.exports = function (grunt) {
 			}
 		}
 
-		const styleUpdated_Client = pluginList.map(p => `node_modules/${p}/*.less`)
+		const styleUpdated_Client = pluginList.map(p => `node_modules/${p}/*.scss`)
 			.concat(pluginList.map(p => `node_modules/${p}/*.css`))
-			.concat(pluginList.map(p => `node_modules/${p}/+(public|static|less)/**/*.less`))
-			.concat(pluginList.map(p => `node_modules/${p}/+(public|static)/**/*.css`));
-
-		const styleUpdated_Admin = pluginList.map(p => `node_modules/${p}/*.less`)
-			.concat(pluginList.map(p => `node_modules/${p}/*.css`))
-			.concat(pluginList.map(p => `node_modules/${p}/+(public|static|less)/**/*.less`))
+			.concat(pluginList.map(p => `node_modules/${p}/+(public|static|scss)/**/*.scss`))
 			.concat(pluginList.map(p => `node_modules/${p}/+(public|static)/**/*.css`));
 
 		const clientUpdated = pluginList.map(p => `node_modules/${p}/+(public|static)/**/*.js`);
@@ -72,24 +67,15 @@ module.exports = function (grunt) {
 		const langUpdated = pluginList.map(p => `node_modules/${p}/+(public|static|languages)/**/*.json`);
 
 		grunt.config(['watch'], {
-			styleUpdated_Client: {
+			styleUpdated: {
 				files: [
-					'public/less/**/*.less',
+					'public/scss/**/*.scss',
 					...styleUpdated_Client,
 				],
 				options: {
 					interval: 1000,
 				},
 			},
-			styleUpdated_Admin: {
-				files: [
-					'public/less/**/*.less',
-					...styleUpdated_Admin,
-				],
-				options: {
-					interval: 1000,
-				},
-			},
 			clientUpdated: {
 				files: [
 					'public/src/**/*.js',
@@ -168,16 +154,14 @@ module.exports = function (grunt) {
 	grunt.event.removeAllListeners('watch');
 	grunt.event.on('watch', (action, filepath, target) => {
 		let compiling;
-		if (target === 'styleUpdated_Client') {
-			compiling = 'clientCSS';
-		} else if (target === 'styleUpdated_Admin') {
-			compiling = 'acpCSS';
+		if (target === 'styleUpdated') {
+			compiling = ['clientCSS', 'acpCSS'];
 		} else if (target === 'clientUpdated') {
-			compiling = 'js';
+			compiling = ['js'];
 		} else if (target === 'templatesUpdated') {
-			compiling = 'tpl';
+			compiling = ['tpl'];
 		} else if (target === 'langUpdated') {
-			compiling = 'lang';
+			compiling = ['lang'];
 		} else if (target === 'serverUpdated') {
 			// empty require cache
 			const paths = ['./src/meta/build.js', './src/meta/index.js'];
@@ -185,7 +169,7 @@ module.exports = function (grunt) {
 			return run();
 		}
 
-		require('./src/meta/build').build([compiling], { webpack: false }, (err) => {
+		require('./src/meta/build').build(compiling, { webpack: false }, (err) => {
 			if (err) {
 				winston.error(err.stack);
 			}

install/package.json

@@ -2,8 +2,8 @@
     "name": "nodebb",
     "license": "GPL-3.0",
     "description": "NodeBB Forum",
-    "version": "2.5.3",
-    "homepage": "http://www.nodebb.org",
+    "version": "3.0.0-alpha.1",
+    "homepage": "https://www.nodebb.org",
     "repository": {
         "type": "git",
         "url": "https://github.com/NodeBB/NodeBB/"
@@ -37,8 +37,9 @@
         "bcryptjs": "2.4.3",
         "benchpressjs": "2.4.3",
         "body-parser": "1.20.0",
-        "bootbox": "5.5.3",
-        "bootstrap": "3.4.1",
+        "bootbox": "https://github.com/makeusabrew/bootbox.git#v6-wip",
+        "bootstrap": "5.2.1",
+        "bootswatch": "5.2.1",
         "chalk": "4.1.2",
         "chart.js": "2.9.4",
         "cli-graph": "3.2.2",
@@ -86,22 +87,19 @@
         "morgan": "1.10.0",
         "mousetrap": "1.6.5",
         "multiparty": "4.2.3",
-        "@nodebb/bootswatch": "3.4.2",
         "nconf": "0.12.0",
-        "nodebb-plugin-2factor": "5.1.1",
-        "nodebb-plugin-composer-default": "9.2.0",
-        "nodebb-plugin-dbsearch": "5.1.5",
-        "nodebb-plugin-emoji": "4.0.5",
-        "nodebb-plugin-emoji-android": "3.0.0",
-        "nodebb-plugin-markdown": "10.1.0",
-        "nodebb-plugin-mentions": "3.0.11",
-        "nodebb-plugin-spam-be-gone": "1.0.0",
+        "nodebb-plugin-2factor": "6.0.2",
+        "nodebb-plugin-composer-default": "10.0.5",
+        "nodebb-plugin-dbsearch": "6.0.0",
+        "nodebb-plugin-emoji": "5.0.2",
+        "nodebb-plugin-emoji-android": "4.0.0",
+        "nodebb-plugin-markdown": "11.0.2",
+        "nodebb-plugin-mentions": "4.0.2",
+        "nodebb-plugin-spam-be-gone": "2.0.0",
         "nodebb-rewards-essentials": "0.2.1",
-        "nodebb-theme-lavender": "6.0.0",
-        "nodebb-theme-persona": "12.1.5",
-        "nodebb-theme-slick": "2.0.2",
-        "nodebb-theme-vanilla": "12.1.18",
-        "nodebb-widget-essentials": "6.0.0",
+        "nodebb-theme-peace": "2.0.1",
+        "nodebb-theme-persona": "13.0.3",
+        "nodebb-widget-essentials": "7.0.1",
         "nodemailer": "6.7.8",
         "nprogress": "0.2.0",
         "passport": "0.6.0",
@@ -117,14 +115,16 @@
         "request-promise-native": "1.0.9",
         "rimraf": "3.0.2",
         "rss": "1.2.2",
+        "rtlcss": "4.0.0",
         "sanitize-html": "2.7.2",
+        "sass": "1.54.9",
         "semver": "7.3.7",
         "serve-favicon": "2.5.0",
         "sharp": "0.31.0",
         "sitemap": "7.1.1",
         "slideout": "1.0.1",
-        "socket.io": "4.5.2",
-        "socket.io-client": "4.5.2",
+        "socket.io": "4.5.1",
+        "socket.io-client": "4.5.1",
         "@socket.io/redis-adapter": "7.2.0",
         "sortablejs": "1.15.0",
         "spdx-license-list": "6.6.0",
@@ -170,11 +170,6 @@
         "node": ">=12"
     },
     "maintainers": [
-        {
-            "name": "Andrew Rodrigues",
-            "email": "andrew@nodebb.org",
-            "url": "https://github.com/psychobunny"
-        },
         {
             "name": "Julian Lam",
             "email": "julian@nodebb.org",
@@ -186,4 +181,4 @@
             "url": "https://github.com/barisusakli"
         }
     ]
-}
+}

install/web.js

@@ -6,7 +6,7 @@ const bodyParser = require('body-parser');
 const fs = require('fs');
 const path = require('path');
 const childProcess = require('child_process');
-const less = require('less');
+const sass = require('sass');
 
 const webpack = require('webpack');
 const nconf = require('nconf');
@@ -73,7 +73,7 @@ web.install = async function (port) {
 	try {
 		await Promise.all([
 			compileTemplate(),
-			compileLess(),
+			compileSass(),
 			runWebpack(),
 			copyCSS(),
 			loadDefaults(),
@@ -247,23 +247,28 @@ async function compileTemplate() {
 	]);
 }
 
-async function compileLess() {
+async function compileSass() {
 	try {
-		const installSrc = path.join(__dirname, '../public/less/install.less');
+		const installSrc = path.join(__dirname, '../public/scss/install.scss');
 		const style = await fs.promises.readFile(installSrc);
-		const css = await less.render(String(style), { filename: path.resolve(installSrc) });
-		await fs.promises.writeFile(path.join(__dirname, '../public/installer.css'), css.css);
+		const scssOutput = sass.compileString(String(style), {
+			loadPaths: [
+				path.join(__dirname, '../public/scss'),
+			],
+		});
+
+		await fs.promises.writeFile(path.join(__dirname, '../public/installer.css'), scssOutput.css.toString());
 	} catch (err) {
-		winston.error(`Unable to compile LESS: \n${err.stack}`);
+		winston.error(`Unable to compile SASS: \n${err.stack}`);
 		throw err;
 	}
 }
 
 async function copyCSS() {
-	const src = await fs.promises.readFile(
-		path.join(__dirname, '../node_modules/bootstrap/dist/css/bootstrap.min.css'), 'utf8'
+	await fs.promises.copyFile(
+		path.join(__dirname, '../node_modules/bootstrap/dist/css/bootstrap.min.css'),
+		path.join(__dirname, '../public/bootstrap.min.css'),
 	);
-	await fs.promises.writeFile(path.join(__dirname, '../public/bootstrap.min.css'), src);
 }
 
 async function loadDefaults() {

public/language/en-GB/admin/appearance/customise.json

@@ -1,7 +1,7 @@
 {
-	"custom-css": "Custom CSS/LESS",
-	"custom-css.description": "Enter your own CSS/LESS declarations here, which will be applied after all other styles.",
-	"custom-css.enable": "Enable Custom CSS/LESS",
+	"custom-css": "Custom CSS/SASS",
+	"custom-css.description": "Enter your own CSS/SASS declarations here, which will be applied after all other styles.",
+	"custom-css.enable": "Enable Custom CSS/SASS",
 
 	"custom-js": "Custom Javascript",
 	"custom-js.description": "Enter your own javascript here. It will be executed after the page is loaded completely.",

public/language/en-GB/admin/extend/widgets.json

@@ -8,9 +8,9 @@
 	"containers.none": "None",
 	"container.well": "Well",
 	"container.jumbotron": "Jumbotron",
-	"container.panel": "Panel",
-	"container.panel-header": "Panel Header",
-	"container.panel-body": "Panel Body",
+	"container.card": "Card",
+	"container.card-header": "Card Header",
+	"container.card-body": "Card Body",
 	"container.alert": "Alert",
 
 	"alert.confirm-delete": "Are you sure you wish to delete this widget?",

public/language/en-GB/admin/settings/navigation.json

@@ -12,7 +12,7 @@
 	"groups": "Groups:",
 	"open-new-window": "Open in a new window",
 	"dropdown": "Dropdown",
-	"dropdown-placeholder": "Place your dropdown menu items below, ie: <br/>&lt;li&gt;&lt;a href&#x3D;&quot;https://myforum.com&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;",
+	"dropdown-placeholder": "Place your dropdown menu items below, ie: <br/>&lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href&#x3D;&quot;https://myforum.com&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;",
 
 	"btn.delete": "Delete",
 	"btn.disable": "Disable",

public/language/en-GB/global.json

@@ -43,7 +43,9 @@
 	"header.notifications": "Notifications",
 	"header.search": "Search",
 	"header.profile": "Profile",
+	"header.account": "Account",
 	"header.navigation": "Navigation",
+	"header.manage": "Manage",
 
 	"notifications.loading": "Loading Notifications",
 	"chats.loading": "Loading Chats",
@@ -108,6 +110,7 @@
 
 	"moderator_tools": "Moderator Tools",
 
+	"status": "Status",
 	"online": "Online",
 	"away": "Away",
 	"dnd": "Do not disturb",

public/language/en-GB/topic.json

@@ -107,7 +107,7 @@
 	"thread_tools.purge": "Purge Topic",
 	"thread_tools.purge_confirm" : "Are you sure you want to purge this topic?",
 	"thread_tools.merge_topics": "Merge Topics",
-	"thread_tools.merge": "Merge",
+	"thread_tools.merge": "Merge Topic",
 
 	"topic_move_success": "This topic will be moved to \"%1\" shortly. Click here to undo.",
 	"topic_move_multiple_success": "These topics will be moved to \"%1\" shortly. Click here to undo.",
@@ -140,7 +140,7 @@
 	"post_moved": "Post moved!",
 	"fork_topic": "Fork Topic",
 	"enter-new-topic-title": "Enter new topic title",
-	"fork_topic_instruction": "Click the posts you want to fork",
+	"fork_topic_instruction": "Click the posts you want to fork, enter a title for the new topic and click fork topic",
 	"fork_no_pids": "No posts selected!",
 	"no-posts-selected": "No posts selected!",
 	"x-posts-selected": "%1 post(s) selected",
@@ -155,6 +155,7 @@
 	"merge-new-title-for-topic": "New title for topic",
 	"topic-id": "Topic ID",
 	"move_posts_instruction": "Click the posts you want to move then enter a topic ID or go to the target topic",
+	"move_topic_instruction": "Select the target category and then click move",
 	"change_owner_instruction": "Click the posts you want to assign to another user",
 
 	"composer.title_placeholder": "Enter your topic title here...",

public/language/en-GB/user.json

@@ -71,6 +71,7 @@
 	"upload_new_picture": "Upload New Picture",
 	"upload_new_picture_from_url": "Upload New Picture From URL",
 	"current_password": "Current Password",
+	"new_password": "New Password",
 	"change_password": "Change Password",
 	"change_password_error": "Invalid Password!",
 	"change_password_error_wrong_current": "Your current password is not correct!",

public/less/admin/advanced/errors.less

@@ -1,26 +0,0 @@
-
-.page-advanced-errors {
-	.table {
-		table-layout: fixed;
-
-		th {
-			&:first-child {
-				width: 90%;
-			}
-
-			&:last-child {
-				text-align: center;
-			}
-		}
-
-		td {
-			&:first-child {
-				word-wrap: break-word;
-			}
-
-			&:last-child {
-				text-align: center;
-			}
-		}
-	}
-}

public/less/admin/advanced/events.less

@@ -1,8 +0,0 @@
-.events-list {
-	.delete-event {
-		i {
-			cursor: pointer;
-			margin-left: 10px;
-		}
-	}
-}

public/less/admin/advanced/hooks.less

@@ -1,3 +0,0 @@
-.admin .hooks-list .panel.panel-default .panel-heading .panel-title a {
-    text-transform: none;
-}

public/less/admin/advanced/logs.less

@@ -1,8 +0,0 @@
-
-.logs {
-	.panel-body {
-		pre {
-			height: 600px;
-		}
-	}
-}

public/less/admin/appearance/themes.less

@@ -1,77 +0,0 @@
-.themes, .skins {
-	ul.directory {
-		margin: 0;
-		padding: 0;
-
-		li {
-			padding: 10px 16px;
-			margin: 0.25em 1em;
-			list-style-type: none;
-			.pointer;
-
-			img {
-				max-width: 150px;
-				float: left;
-			}
-
-			h4, p {
-				margin-left: 170px;
-			}
-
-			p {
-				font-size: 0.9em;
-			}
-
-			&.no-themes {
-				font-style: italic;
-			}
-		}
-	}
-
-	.theme-card {
-		margin-bottom: 30px;
-		margin-left: auto;
-		margin-right: auto;
-
-		.mdl-card__title {
-			height: 223px;
-			background-size: contain;
-		}
-
-		.mdl-card__supporting-text {
-			font-size: 1.5rem;
-			margin: 0 auto;
-
-			.mdl-card__title-text {
-				display: inline-block;
-				margin-bottom: 15px;
-			}
-		}
-	}
-
-	[data-theme].selected .mdl-button {
-		color: black;
-	}
-
-	[data-type="bootswatch"] {
-		.mdl-card__title {
-			height: 198px;
-		}
-
-		.mdl-card__title-text {
-			display: none;
-		}
-	}
-
-	[data-type="local"] {
-		.mdl-card__supporting-text {
-			height: 150px;
-		}
-	}
-
-	textarea[data-field] {
-		min-height: 450px;
-		width: 100%;
-		resize: vertical;
-	}
-}

public/less/admin/development/info.less

@@ -1,3 +0,0 @@
-.page-admin-info #content {
-    width: auto;
-}

public/less/admin/manage/admins-mods.less

@@ -1,30 +0,0 @@
-.admins-mods {
-	.user-card {
-		background: #eeeeee;
-		border-radius: 4px;
-		margin: 5px;
-		padding: 5px;
-		height: 35px;
-	}
-
-	.remove-user-icon {
-		margin-right: 5px;
-		margin-left: 5px;
-	}
-
-	.category-depth-1 {
-		margin-left: 30px;
-	}
-	.category-depth-2 {
-		margin-left: 60px;
-	}
-	.category-depth-3 {
-		margin-left: 90px;
-	}
-	.category-depth-4 {
-		margin-left: 120px;
-	}
-	.category-depth-5 {
-		margin-left: 150px;
-	}
-}

public/less/admin/manage/registration.less

@@ -1,7 +0,0 @@
-@media screen and (max-width: @screen-sm-max) {
-	.page-manage-registration {
-		.users-list {
-			font-size: 10px;
-		}
-	}
-}

public/less/admin/manage/users.less

@@ -1,19 +0,0 @@
-.manage-users {
-	min-height: 500px;
-	.search {
-		.form-control {
-			width: 100%;
-		}
-	}
-}
-
-.page-admin-users {
-	.group-card {
-		margin: 2px;
-		padding: 2px;
-	}
-
-	.remove-group-icon {
-		margin-left: 5px;
-	}
-}

public/less/admin/modules/nprogress.less

@@ -1,80 +0,0 @@
-#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: 165px;
-  right: 35px;
-}
-
-@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); }
-}
-

public/less/admin/paper/bootswatch.less

@@ -1,621 +0,0 @@
-// Paper 3.3.5
-// Bootswatch
-// -----------------------------------------------------
-
-// Navbar =====================================================================
-
-.navbar {
-  border: none;
-  .box-shadow(0 1px 2px rgba(0,0,0,.3));
-
-  &-brand {
-    font-size: 24px;
-  }
-
-  &-inverse {
-    .form-control {
-      color: #fff;
-      .placeholder(@navbar-inverse-link-color);
-
-      &[type=text],
-      &[type=password] {
-        .box-shadow(inset 0 -1px 0 @navbar-inverse-link-color);
-
-        &:focus {
-          .box-shadow(inset 0 -2px 0 #fff);
-        }
-      }
-    }
-  }
-}
-
-// Buttons ====================================================================
-
-#btn(@class,@bg) {
-  .btn-@{class} {
-    background-size: 200%;
-    background-position: 50%;
-
-    &:focus {
-      background-color: @bg;
-    }
-
-    &:hover,
-    &:active:hover {
-      background-color: darken(@bg, 6%);
-    }
-
-    &:active {
-      background-color: darken(@bg, 12%);
-      #gradient > .radial(darken(@bg, 12%) 10%, @bg 11%);
-      background-size: 1000%;
-      .box-shadow(2px 2px 4px rgba(0,0,0,.4));
-    }
-  }
-}
-
-#btn(default,@btn-default-bg);
-#btn(primary,@btn-primary-bg);
-#btn(success,@btn-success-bg);
-#btn(info,@btn-info-bg);
-#btn(warning,@btn-warning-bg);
-#btn(danger,@btn-danger-bg);
-#btn(link,#fff);
-
-.btn {
-  text-transform: uppercase;
-  border: none;
-  .box-shadow(1px 1px 4px rgba(0,0,0,.4));
-  .transition(all 0.4s);
-
-  &-link {
-    border-radius: @btn-border-radius-base;
-    .box-shadow(none);
-    color: @btn-default-color;
-
-    &:hover,
-    &:focus {
-      .box-shadow(none);
-      color: @btn-default-color;
-      text-decoration: none;
-    }
-  }
-
-  &-default {
-
-    &.disabled {
-      background-color: rgba(0, 0, 0, 0.1);
-      color: rgba(0, 0, 0, 0.4);
-      opacity: 1;
-    }
-  }
-}
-
-.btn-group {
-  .btn + .btn,
-  .btn + .btn-group,
-  .btn-group + .btn,
-  .btn-group + .btn-group {
-    margin-left: 0;
-  }
-
-  &-vertical {
-    > .btn + .btn,
-    > .btn + .btn-group,
-    > .btn-group + .btn,
-    > .btn-group + .btn-group {
-      margin-top: 0;
-    }
-  }
-}
-
-// Typography =================================================================
-
-body {
-  -webkit-font-smoothing: antialiased;
-  letter-spacing: .1px;
-}
-
-p {
-  margin: 0 0 1em;
-}
-
-input,
-button {
-  -webkit-font-smoothing: antialiased;
-  letter-spacing: .1px;
-}
-
-a {
-  .transition(all 0.2s);
-}
-
-// Tables =====================================================================
-
-.table-hover {
-  > tbody > tr,
-  > tbody > tr > th,
-  > tbody > tr > td {
-    .transition(all 0.2s);
-  }
-}
-
-// Forms ======================================================================
-
-label {
-  font-weight: normal;
-}
-
-textarea,
-textarea.form-control,
-input.form-control,
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=number],
-[type=text].form-control,
-[type=password].form-control,
-[type=email].form-control,
-[type=tel].form-control,
-[contenteditable].form-control {
-  padding: 0;
-  border: none;
-  border-radius: 0;
-  -webkit-appearance: none;
-  .box-shadow(inset 0 -1px 0 #ddd);
-  font-size: 16px;
-
-  &:focus {
-    .box-shadow(inset 0 -2px 0 @brand-primary);
-  }
-
-  &[disabled],
-  &[readonly] {
-    .box-shadow(none);
-    border-bottom: 1px dotted #ddd;
-  }
-
-  &.input {
-    &-sm {
-      font-size: @font-size-small;
-    }
-
-    &-lg {
-      font-size: @font-size-large;
-    }
-  }
-}
-
-select,
-select.form-control {
-  border: 0;
-  border-radius: 0;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  padding-left: 0;
-  padding-right: 0\9; // remove padding for < ie9 since default arrow can't be removed
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
-  background-size: 13px;
-  background-repeat: no-repeat;
-  background-position: right center;
-  .box-shadow(inset 0 -1px 0 #ddd);
-  font-size: 16px;
-  line-height: 1.5;
-
-  &::-ms-expand {
-    display: none;
-  }
-
-  &.input {
-    &-sm {
-      font-size: @font-size-small;
-    }
-
-    &-lg {
-      font-size: @font-size-large;
-    }
-  }
-
-  &:focus {
-    .box-shadow(inset 0 -2px 0 @brand-primary);
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEUhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISEhISF8S9ewAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
-  }
-
-  &[multiple] {
-    background: none;
-  }
-}
-
-.radio,
-.radio-inline,
-.checkbox,
-.checkbox-inline {
-  label {
-    padding-left: 25px;
-  }
-
-  input[type="radio"],
-  input[type="checkbox"] {
-    margin-left: -25px;
-  }
-}
-
-input[type="radio"],
-.radio input[type="radio"],
-.radio-inline input[type="radio"] {
-  position: relative;
-  margin-top: 6px;
-  margin-right: 4px;
-  vertical-align: top;
-  border: none;
-  background-color: transparent;
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:before,
-  &:after {
-    content: "";
-    display: block;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    .transition(240ms);
-  }
-
-  &:before {
-    position: absolute;
-    left: 0;
-    top: -3px;
-    background-color: @brand-primary;
-    .scale(0);
-  }
-
-  &:after {
-    position: relative;
-    top: -3px;
-    border: 2px solid @gray;
-  }
-
-  &:checked:before {
-    .scale(0.5);
-  }
-
-  &:disabled:checked:before {
-    background-color: @gray-light;
-  }
-
-  &:checked:after {
-    border-color: @brand-primary;
-  }
-
-  &:disabled:after,
-  &:disabled:checked:after {
-    border-color: @gray-light;
-  }
-}
-
-input[type="checkbox"],
-.checkbox input[type="checkbox"],
-.checkbox-inline input[type="checkbox"] {
-  position: relative;
-  border: none;
-  margin-bottom: -4px;
-  -webkit-appearance: none;
-  appearance: none;
-  cursor: pointer;
-
-  &:focus {
-    outline: none;
-  }
-
-  &:after {
-    content: "";
-    display: block;
-    width: 18px;
-    height: 18px;
-    margin-top: -2px;
-    margin-right: 5px;
-    border: 2px solid @gray;
-    border-radius: 2px;
-    .transition(240ms);
-  }
-
-  &:indeterminate:before {
-    content: "";
-    position: absolute;
-    top: 6px;
-    left: 6px;
-    display: table;
-    width: 6px;
-    height: 12px;
-    border-top: 2px solid #fff;
-  }
-
-  &:indeterminate:after {
-    background-color: @brand-primary;
-    border-color: @brand-primary;
-  }
-
-  &:checked:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 6px;
-    display: table;
-    width: 6px;
-    height: 12px;
-    border: 2px solid #fff;
-    border-top-width: 0;
-    border-left-width: 0;
-    .rotate(45deg);
-  }
-
-  &:checked:after {
-    background-color: @brand-primary;
-    border-color: @brand-primary;
-  }
-
-  &:disabled:after {
-    border-color: @gray-light;
-  }
-
-  &:disabled:checked:after {
-    background-color: @gray-light;
-    border-color: transparent;
-  }
-}
-
-.has-warning {
-  input:not([type=checkbox]),
-  .form-control,
-  input.form-control[readonly],
-  input[type=text][readonly],
-  [type=text].form-control[readonly],
-  input:not([type=checkbox]):focus,
-  .form-control:focus {
-    border-bottom: none;
-    .box-shadow(inset 0 -2px 0 @brand-warning);
-  }
-}
-
-.has-error {
-  input:not([type=checkbox]),
-  .form-control,
-  input.form-control[readonly],
-  input[type=text][readonly],
-  [type=text].form-control[readonly],
-  input:not([type=checkbox]):focus,
-  .form-control:focus {
-    border-bottom: none;
-    .box-shadow(inset 0 -2px 0 @brand-danger);
-  }
-}
-
-.has-success {
-  input:not([type=checkbox]),
-  .form-control,
-  input.form-control[readonly],
-  input[type=text][readonly],
-  [type=text].form-control[readonly],
-  input:not([type=checkbox]):focus,
-  .form-control:focus {
-    border-bottom: none;
-    .box-shadow(inset 0 -2px 0 @brand-success);
-  }
-}
-
-// Remove the Bootstrap feedback styles for input addons
-.input-group-addon {
-  .has-warning &, .has-error &, .has-success & {
-    color: @input-color;
-    border-color: @input-group-addon-border-color;
-    background-color: @input-group-addon-bg;
-  }
-}
-
-// Navs =======================================================================
-
-.nav-tabs {
-  > li > a,
-  > li > a:focus {
-    margin-right: 0;
-    background-color: transparent;
-    border: none;
-    color: @navbar-default-link-color;
-    .box-shadow(inset 0 -1px 0 #ddd);
-    .transition(all 0.2s);
-
-    &:hover {
-      background-color: transparent;
-      .box-shadow(inset 0 -2px 0 @brand-primary);
-      color: @brand-primary;
-    }
-  }
-
-  & > li.active > a,
-  & > li.active > a:focus {
-    border: none;
-    .box-shadow(inset 0 -2px 0 @brand-primary);
-    color: @brand-primary;
-
-    &:hover {
-      border: none;
-      color: @brand-primary;
-    }
-  }
-
-  & > li.disabled > a {
-    .box-shadow(inset 0 -1px 0 #ddd);
-  }
-
-  &.nav-justified {
-
-    & > li > a,
-    & > li > a:hover,
-    & > li > a:focus,
-    & > .active > a,
-    & > .active > a:hover,
-    & > .active > a:focus {
-      border: none;
-    }
-  }
-
-  .dropdown-menu {
-    margin-top: 0;
-  }
-}
-
-.dropdown-menu {
-  margin-top: 0;
-  border: none;
-  .box-shadow(0 1px 4px rgba(0,0,0,.3));
-}
-
-// Indicators =================================================================
-
-.alert {
-  border: none;
-  color: #fff;
-
-  &-success {
-    background-color: @brand-success;
-  }
-
-  &-info {
-    background-color: @brand-info;
-  }
-
-  &-warning {
-    background-color: @brand-warning;
-  }
-
-  &-danger {
-    background-color: @brand-danger;
-  }
-
-  a:not(.close),
-  .alert-link {
-    color: #fff;
-    font-weight: bold;
-  }
-
-  .close {
-    color: #fff;
-  }
-}
-
-.badge {
-  padding: 3px 6px 5px;
-}
-
-.progress {
-  position: relative;
-  z-index: 1;
-  height: 6px;
-  border-radius: 0;
-
-  .box-shadow(none);
-
-  &-bar {
-    .box-shadow(none);
-
-    &:last-child {
-      border-radius: 0 3px 3px 0;
-    }
-
-    &:last-child {
-      &:before {
-        display: block;
-        content: "";
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        left: 0;
-        right: 0;
-        z-index: -1;
-        background-color: lighten(@progress-bar-bg, 35%);
-      }
-    }
-
-    &-success:last-child.progress-bar:before {
-      background-color: lighten(@brand-success, 35%);
-    }
-
-    &-info:last-child.progress-bar:before {
-      background-color: lighten(@brand-info, 45%);
-    }
-    &-warning:last-child.progress-bar:before {
-      background-color: lighten(@brand-warning, 35%);
-    }
-
-    &-danger:last-child.progress-bar:before {
-      background-color: lighten(@brand-danger, 25%);
-    }
-  }
-}
-
-// Progress bars ==============================================================
-
-// Containers =================================================================
-
-.close {
-  font-size: 34px;
-  font-weight: 300;
-  line-height: 24px;
-  opacity: 0.6;
-  .transition(all 0.2s);
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.list-group {
-
-  &-item {
-    padding: 15px;
-  }
-
-  &-item-text {
-    color: @gray-light;
-  }
-}
-
-.well {
-  border-radius: 0;
-  .box-shadow(none);
-}
-
-.panel {
-  border: none;
-  border-radius: 2px;
-  .box-shadow(0 1px 4px rgba(0,0,0,.3));
-
-  &-heading {
-    border-bottom: none;
-  }
-
-  &-footer {
-    border-top: none;
-  }
-}
-
-.popover {
-  border: none;
-  .box-shadow(0 1px 4px rgba(0,0,0,.3));
-}
-
-.carousel {
-  &-caption {
-    h1, h2, h3, h4, h5, h6 {
-      color: inherit;
-    }
-  }
-}
-

public/less/admin/paper/variables.less

@@ -1,869 +0,0 @@
-// Paper 3.3.7
-// Variables
-// --------------------------------------------------
-
-
-//== Colors
-//
-//## Gray and brand colors for use across Bootstrap.
-
-@gray-base:              #000;
-@gray-darker:            lighten(@gray-base, 13.5%); // #222
-@gray-dark:              #212121;
-@gray:                   #666;
-@gray-light:             #bbb;
-@gray-lighter:           lighten(@gray-base, 93.5%); // #eee
-
-@brand-primary:         #2196F3;
-@brand-success:         #4CAF50;
-@brand-info:            #9C27B0;
-@brand-warning:         #ff9800;
-@brand-danger:          #e51c23;
-
-
-//== Scaffolding
-//
-//## Settings for some of the most global styles.
-
-//** Background color for `<body>`.
-@body-bg:               #fff;
-//** Global text color on `<body>`.
-@text-color:            @gray;
-
-//** Global textual link color.
-@link-color:            @brand-primary;
-//** Link hover color set via `darken()` function.
-@link-hover-color:      darken(@link-color, 15%);
-//** Link hover decoration.
-@link-hover-decoration: underline;
-
-
-//== Typography
-//
-//## Font, line-height, and color for body text, headings, and more.
-
-@font-family-sans-serif:  "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
-@font-family-serif:       Georgia, "Times New Roman", Times, serif;
-//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
-@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-@font-family-base:        @font-family-sans-serif;
-
-@font-size-base:          13px;
-@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
-@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
-
-@font-size-h1:            56px;
-@font-size-h2:            45px;
-@font-size-h3:            34px;
-@font-size-h4:            24px;
-@font-size-h5:            20px;
-@font-size-h6:            14px;
-
-//** Unit-less `line-height` for use in components like buttons.
-@line-height-base:        1.846; // 20/14
-//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
-@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px
-
-//** By default, this inherits from the `<body>`.
-@headings-font-family:    inherit;
-@headings-font-weight:    400;
-@headings-line-height:    1.1;
-@headings-color:          #444;
-
-
-//== Iconography
-//
-//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
-
-//** Load fonts from this directory.
-@icon-font-path:          "../fonts/";
-//** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular";
-//** Element ID within SVG icon file.
-@icon-font-svg-id:        "glyphicons_halflingsregular";
-
-
-//== Components
-//
-//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
-
-@padding-base-vertical:     6px;
-@padding-base-horizontal:   16px;
-
-@padding-large-vertical:    10px;
-@padding-large-horizontal:  16px;
-
-@padding-small-vertical:    5px;
-@padding-small-horizontal:  10px;
-
-@padding-xs-vertical:       1px;
-@padding-xs-horizontal:     5px;
-
-@line-height-large:         1.3333333; // extra decimals for Win 8.1 Chrome
-@line-height-small:         1.5;
-
-@border-radius-base:        3px;
-@border-radius-large:       3px;
-@border-radius-small:       3px;
-
-//** Global color for active items (e.g., navs or dropdowns).
-@component-active-color:    #fff;
-//** Global background color for active items (e.g., navs or dropdowns).
-@component-active-bg:       @brand-primary;
-
-//** Width of the `border` for generating carets that indicate dropdowns.
-@caret-width-base:          4px;
-//** Carets increase slightly in size for larger components.
-@caret-width-large:         5px;
-
-
-//== Tables
-//
-//## Customizes the `.table` component with basic values, each used across all table variations.
-
-//** Padding for `<th>`s and `<td>`s.
-@table-cell-padding:            8px;
-//** Padding for cells in `.table-condensed`.
-@table-condensed-cell-padding:  5px;
-
-//** Default background color used for all tables.
-@table-bg:                      transparent;
-//** Background color used for `.table-striped`.
-@table-bg-accent:               #f9f9f9;
-//** Background color used for `.table-hover`.
-@table-bg-hover:                #f5f5f5;
-@table-bg-active:               @table-bg-hover;
-
-//** Border color for table and cell borders.
-@table-border-color:            #ddd;
-
-
-//== Buttons
-//
-//## For each of Bootstrap's buttons, define text, background and border color.
-
-@btn-font-weight:                normal;
-
-@btn-default-color:              #444;
-@btn-default-bg:                 #fff;
-@btn-default-border:             transparent;
-
-@btn-primary-color:              #fff;
-@btn-primary-bg:                 @brand-primary;
-@btn-primary-border:             transparent;
-
-@btn-success-color:              #fff;
-@btn-success-bg:                 @brand-success;
-@btn-success-border:             transparent;
-
-@btn-info-color:                 #fff;
-@btn-info-bg:                    @brand-info;
-@btn-info-border:                transparent;
-
-@btn-warning-color:              #fff;
-@btn-warning-bg:                 @brand-warning;
-@btn-warning-border:             transparent;
-
-@btn-danger-color:               #fff;
-@btn-danger-bg:                  @brand-danger;
-@btn-danger-border:              transparent;
-
-@btn-link-disabled-color:        @gray-light;
-
-// Allows for customizing button radius independently from global border radius
-@btn-border-radius-base:         @border-radius-base;
-@btn-border-radius-large:        @border-radius-large;
-@btn-border-radius-small:        @border-radius-small;
-
-
-//== Forms
-//
-//##
-
-//** `<input>` background color
-@input-bg:                       transparent;
-//** `<input disabled>` background color
-@input-bg-disabled:              transparent;
-
-//** Text color for `<input>`s
-@input-color:                    @gray;
-//** `<input>` border color
-@input-border:                   transparent;
-
-// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4
-//** Default `.form-control` border radius
-// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
-@input-border-radius:            @border-radius-base;
-//** Large `.form-control` border radius
-@input-border-radius-large:      @border-radius-large;
-//** Small `.form-control` border radius
-@input-border-radius-small:      @border-radius-small;
-
-//** Border color for inputs on focus
-@input-border-focus:             #66afe9;
-
-//** Placeholder text color
-@input-color-placeholder:        @gray-light;
-
-//** Default `.form-control` height
-@input-height-base:              (@line-height-computed + (@padding-base-vertical * 2) + 2);
-//** Large `.form-control` height
-@input-height-large:             (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2);
-//** Small `.form-control` height
-@input-height-small:             (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2);
-
-//** `.form-group` margin
-@form-group-margin-bottom:       15px;
-
-@legend-color:                   @gray-dark;
-@legend-border-color:            #e5e5e5;
-
-//** Background color for textual input addons
-@input-group-addon-bg:           transparent;
-//** Border color for textual input addons
-@input-group-addon-border-color: @input-border;
-
-//** Disabled cursor for form controls and buttons.
-@cursor-disabled:                not-allowed;
-
-
-//== Dropdowns
-//
-//## Dropdown menu container and contents.
-
-//** Background for the dropdown menu.
-@dropdown-bg:                    #fff;
-//** Dropdown menu `border-color`.
-@dropdown-border:                rgba(0,0,0,.15);
-//** Dropdown menu `border-color` **for IE8**.
-@dropdown-fallback-border:       #ccc;
-//** Divider color for between dropdown items.
-@dropdown-divider-bg:            #e5e5e5;
-
-//** Dropdown link text color.
-@dropdown-link-color:            @text-color;
-//** Hover color for dropdown links.
-@dropdown-link-hover-color:      darken(@gray-dark, 5%);
-//** Hover background for dropdown links.
-@dropdown-link-hover-bg:         @gray-lighter;
-
-//** Active dropdown menu item text color.
-@dropdown-link-active-color:     @component-active-color;
-//** Active dropdown menu item background color.
-@dropdown-link-active-bg:        @component-active-bg;
-
-//** Disabled dropdown menu item background color.
-@dropdown-link-disabled-color:   @gray-light;
-
-//** Text color for headers within dropdown menus.
-@dropdown-header-color:          @gray-light;
-
-//** Deprecated `@dropdown-caret-color` as of v3.1.0
-@dropdown-caret-color:           @gray-light;
-
-
-//-- Z-index master list
-//
-// Warning: Avoid customizing these values. They're used for a bird's eye view
-// of components dependent on the z-axis and are designed to all work together.
-//
-// Note: These variables are not generated into the Customizer.
-
-@zindex-navbar:            1000;
-@zindex-dropdown:          1000;
-@zindex-popover:           1060;
-@zindex-tooltip:           1070;
-@zindex-navbar-fixed:      1030;
-@zindex-modal-background:  1040;
-@zindex-modal:             1050;
-
-
-//== Media queries breakpoints
-//
-//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-// Extra small screen / phone
-//** Deprecated `@screen-xs` as of v3.0.1
-@screen-xs:                  480px;
-//** Deprecated `@screen-xs-min` as of v3.2.0
-@screen-xs-min:              @screen-xs;
-//** Deprecated `@screen-phone` as of v3.0.1
-@screen-phone:               @screen-xs-min;
-
-// Small screen / tablet
-//** Deprecated `@screen-sm` as of v3.0.1
-@screen-sm:                  768px;
-@screen-sm-min:              @screen-sm;
-//** Deprecated `@screen-tablet` as of v3.0.1
-@screen-tablet:              @screen-sm-min;
-
-// Medium screen / desktop
-//** Deprecated `@screen-md` as of v3.0.1
-@screen-md:                  992px;
-@screen-md-min:              @screen-md;
-//** Deprecated `@screen-desktop` as of v3.0.1
-@screen-desktop:             @screen-md-min;
-
-// Large screen / wide desktop
-//** Deprecated `@screen-lg` as of v3.0.1
-@screen-lg:                  1200px;
-@screen-lg-min:              @screen-lg;
-//** Deprecated `@screen-lg-desktop` as of v3.0.1
-@screen-lg-desktop:          @screen-lg-min;
-
-// So media queries don't overlap when required, provide a maximum
-@screen-xs-max:              (@screen-sm-min - 1);
-@screen-sm-max:              (@screen-md-min - 1);
-@screen-md-max:              (@screen-lg-min - 1);
-
-
-//== Grid system
-//
-//## Define your custom responsive grid.
-
-//** Number of columns in the grid.
-@grid-columns:              12;
-//** Padding between columns. Gets divided in half for the left and right.
-@grid-gutter-width:         30px;
-// Navbar collapse
-//** Point at which the navbar becomes uncollapsed.
-@grid-float-breakpoint:     @screen-sm-min;
-//** Point at which the navbar begins collapsing.
-@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
-
-
-//== Container sizes
-//
-//## Define the maximum width of `.container` for different screen sizes.
-
-// Small screen / tablet
-@container-tablet:             (720px + @grid-gutter-width);
-//** For `@screen-sm-min` and up.
-@container-sm:                 @container-tablet;
-
-// Medium screen / desktop
-@container-desktop:            (940px + @grid-gutter-width);
-//** For `@screen-md-min` and up.
-@container-md:                 @container-desktop;
-
-// Large screen / wide desktop
-@container-large-desktop:      (1140px + @grid-gutter-width);
-//** For `@screen-lg-min` and up.
-@container-lg:                 @container-large-desktop;
-
-
-//== Navbar
-//
-//##
-
-// Basics of a navbar
-@navbar-height:                    64px;
-@navbar-margin-bottom:             @line-height-computed;
-@navbar-border-radius:             @border-radius-base;
-@navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
-@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height:       340px;
-
-@navbar-default-color:             @gray-light;
-@navbar-default-bg:                #fff;
-@navbar-default-border:            transparent;
-
-// Navbar links
-@navbar-default-link-color:                @gray;
-@navbar-default-link-hover-color:          @gray-dark;
-@navbar-default-link-hover-bg:             transparent;
-@navbar-default-link-active-color:         @gray-dark;
-@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
-@navbar-default-link-disabled-color:       #ccc;
-@navbar-default-link-disabled-bg:          transparent;
-
-// Navbar brand label
-@navbar-default-brand-color:               @navbar-default-link-color;
-@navbar-default-brand-hover-color:         @navbar-default-link-hover-color;
-@navbar-default-brand-hover-bg:            transparent;
-
-// Navbar toggle
-@navbar-default-toggle-hover-bg:           transparent;
-@navbar-default-toggle-icon-bar-bg:        rgba(0,0,0,0.5);
-@navbar-default-toggle-border-color:       transparent;
-
-
-//=== Inverted navbar
-// Reset inverted navbar basics
-@navbar-inverse-color:                      @gray-light;
-@navbar-inverse-bg:                         @brand-primary;
-@navbar-inverse-border:                     transparent;
-
-// Inverted navbar links
-@navbar-inverse-link-color:                 lighten(@brand-primary, 30%);
-@navbar-inverse-link-hover-color:           #fff;
-@navbar-inverse-link-hover-bg:              transparent;
-@navbar-inverse-link-active-color:          @navbar-inverse-link-hover-color;
-@navbar-inverse-link-active-bg:             darken(@navbar-inverse-bg, 10%);
-@navbar-inverse-link-disabled-color:        #444;
-@navbar-inverse-link-disabled-bg:           transparent;
-
-// Inverted navbar brand label
-@navbar-inverse-brand-color:                @navbar-inverse-link-color;
-@navbar-inverse-brand-hover-color:          #fff;
-@navbar-inverse-brand-hover-bg:             transparent;
-
-// Inverted navbar toggle\
-@navbar-inverse-toggle-hover-bg:            transparent;
-@navbar-inverse-toggle-icon-bar-bg:         rgba(0,0,0,0.5);
-@navbar-inverse-toggle-border-color:        transparent;
-
-
-//== Navs
-//
-//##
-
-//=== Shared nav styles
-@nav-link-padding:                          10px 15px;
-@nav-link-hover-bg:                         @gray-lighter;
-
-@nav-disabled-link-color:                   @gray-light;
-@nav-disabled-link-hover-color:             @gray-light;
-
-//== Tabs
-@nav-tabs-border-color:                     transparent;
-
-@nav-tabs-link-hover-border-color:          @gray-lighter;
-
-@nav-tabs-active-link-hover-bg:             transparent;
-@nav-tabs-active-link-hover-color:          @gray;
-@nav-tabs-active-link-hover-border-color:   transparent;
-
-@nav-tabs-justified-link-border-color:            @nav-tabs-border-color;
-@nav-tabs-justified-active-link-border-color:     @body-bg;
-
-//== Pills
-@nav-pills-border-radius:                   @border-radius-base;
-@nav-pills-active-link-hover-bg:            @component-active-bg;
-@nav-pills-active-link-hover-color:         @component-active-color;
-
-
-//== Pagination
-//
-//##
-
-@pagination-color:                     @link-color;
-@pagination-bg:                        #fff;
-@pagination-border:                    #ddd;
-
-@pagination-hover-color:               @link-hover-color;
-@pagination-hover-bg:                  @gray-lighter;
-@pagination-hover-border:              #ddd;
-
-@pagination-active-color:              #fff;
-@pagination-active-bg:                 @brand-primary;
-@pagination-active-border:             @brand-primary;
-
-@pagination-disabled-color:            @gray-light;
-@pagination-disabled-bg:               #fff;
-@pagination-disabled-border:           #ddd;
-
-
-//== Pager
-//
-//##
-
-@pager-bg:                             @pagination-bg;
-@pager-border:                         @pagination-border;
-@pager-border-radius:                  15px;
-
-@pager-hover-bg:                       @pagination-hover-bg;
-
-@pager-active-bg:                      @pagination-active-bg;
-@pager-active-color:                   @pagination-active-color;
-
-@pager-disabled-color:                 @pagination-disabled-color;
-
-
-//== Jumbotron
-//
-//##
-
-@jumbotron-padding:              30px;
-@jumbotron-color:                inherit;
-@jumbotron-bg:                   #f5f5f5;
-@jumbotron-heading-color:        @headings-color;
-@jumbotron-font-size:            ceil((@font-size-base * 1.5));
-@jumbotron-heading-font-size:    ceil((@font-size-base * 4.5));
-
-
-//== Form states and alerts
-//
-//## Define colors for form feedback states and, by default, alerts.
-
-@state-success-text:             @brand-success;
-@state-success-bg:               #dff0d8;
-@state-success-border:           darken(spin(@state-success-bg, -10), 5%);
-
-@state-info-text:                @brand-info;
-@state-info-bg:                  #e1bee7;
-@state-info-border:              darken(spin(@state-info-bg, -10), 7%);
-
-@state-warning-text:             @brand-warning;
-@state-warning-bg:               #ffe0b2;
-@state-warning-border:           darken(spin(@state-warning-bg, -10), 5%);
-
-@state-danger-text:              @brand-danger;
-@state-danger-bg:                #f9bdbb;
-@state-danger-border:            darken(spin(@state-danger-bg, -10), 5%);
-
-
-//== Tooltips
-//
-//##
-
-//** Tooltip max width
-@tooltip-max-width:           200px;
-//** Tooltip text color
-@tooltip-color:               #fff;
-//** Tooltip background color
-@tooltip-bg:                  #727272;
-@tooltip-opacity:             .9;
-
-//** Tooltip arrow width
-@tooltip-arrow-width:         5px;
-//** Tooltip arrow color
-@tooltip-arrow-color:         @tooltip-bg;
-
-
-//== Popovers
-//
-//##
-
-//** Popover body background color
-@popover-bg:                          #fff;
-//** Popover maximum width
-@popover-max-width:                   276px;
-//** Popover border color
-@popover-border-color:                transparent;
-//** Popover fallback border color
-@popover-fallback-border-color:       transparent;
-
-//** Popover title background color
-@popover-title-bg:                    darken(@popover-bg, 3%);
-
-//** Popover arrow width
-@popover-arrow-width:                 10px;
-//** Popover arrow color
-@popover-arrow-color:                 @popover-bg;
-
-//** Popover outer arrow width
-@popover-arrow-outer-width:           (@popover-arrow-width + 1);
-//** Popover outer arrow color
-@popover-arrow-outer-color:           fadein(@popover-border-color, 12%);
-//** Popover outer arrow fallback color
-@popover-arrow-outer-fallback-color:  darken(@popover-fallback-border-color, 20%);
-
-
-//== Labels
-//
-//##
-
-//** Default label background color
-@label-default-bg:            @gray-light;
-//** Primary label background color
-@label-primary-bg:            @brand-primary;
-//** Success label background color
-@label-success-bg:            @brand-success;
-//** Info label background color
-@label-info-bg:               @brand-info;
-//** Warning label background color
-@label-warning-bg:            @brand-warning;
-//** Danger label background color
-@label-danger-bg:             @brand-danger;
-
-//** Default label text color
-@label-color:                 #fff;
-//** Default text color of a linked label
-@label-link-hover-color:      #fff;
-
-
-//== Modals
-//
-//##
-
-//** Padding applied to the modal body
-@modal-inner-padding:         15px;
-
-//** Padding applied to the modal title
-@modal-title-padding:         15px;
-//** Modal title line-height
-@modal-title-line-height:     @line-height-base;
-
-//** Background color of modal content area
-@modal-content-bg:                             #fff;
-//** Modal content border color
-@modal-content-border-color:                   transparent;
-//** Modal content border color **for IE8**
-@modal-content-fallback-border-color:          #999;
-
-//** Modal backdrop background color
-@modal-backdrop-bg:           #000;
-//** Modal backdrop opacity
-@modal-backdrop-opacity:      .5;
-//** Modal header border color
-@modal-header-border-color:   transparent;
-//** Modal footer border color
-@modal-footer-border-color:   @modal-header-border-color;
-
-@modal-lg:                    900px;
-@modal-md:                    600px;
-@modal-sm:                    300px;
-
-
-//== Alerts
-//
-//## Define alert colors, border radius, and padding.
-
-@alert-padding:               15px;
-@alert-border-radius:         @border-radius-base;
-@alert-link-font-weight:      bold;
-
-@alert-success-bg:            @state-success-bg;
-@alert-success-text:          @state-success-text;
-@alert-success-border:        @state-success-border;
-
-@alert-info-bg:               @state-info-bg;
-@alert-info-text:             @state-info-text;
-@alert-info-border:           @state-info-border;
-
-@alert-warning-bg:            @state-warning-bg;
-@alert-warning-text:          @state-warning-text;
-@alert-warning-border:        @state-warning-border;
-
-@alert-danger-bg:             @state-danger-bg;
-@alert-danger-text:           @state-danger-text;
-@alert-danger-border:         @state-danger-border;
-
-
-//== Progress bars
-//
-//##
-
-//** Background color of the whole progress component
-@progress-bg:                 #f5f5f5;
-//** Progress bar text color
-@progress-bar-color:          #fff;
-//** Variable for setting rounded corners on progress bar.
-@progress-border-radius:      @border-radius-base;
-
-//** Default progress bar color
-@progress-bar-bg:             @brand-primary;
-//** Success progress bar color
-@progress-bar-success-bg:     @brand-success;
-//** Warning progress bar color
-@progress-bar-warning-bg:     @brand-warning;
-//** Danger progress bar color
-@progress-bar-danger-bg:      @brand-danger;
-//** Info progress bar color
-@progress-bar-info-bg:        @brand-info;
-
-
-//== List group
-//
-//##
-
-//** Background color on `.list-group-item`
-@list-group-bg:                 #fff;
-//** `.list-group-item` border color
-@list-group-border:             #ddd;
-//** List group border radius
-@list-group-border-radius:      @border-radius-base;
-
-//** Background color of single list items on hover
-@list-group-hover-bg:           #f5f5f5;
-//** Text color of active list items
-@list-group-active-color:       @component-active-color;
-//** Background color of active list items
-@list-group-active-bg:          @component-active-bg;
-//** Border color of active list elements
-@list-group-active-border:      @list-group-active-bg;
-//** Text color for content within active list items
-@list-group-active-text-color:  lighten(@list-group-active-bg, 40%);
-
-//** Text color of disabled list items
-@list-group-disabled-color:      @gray-light;
-//** Background color of disabled list items
-@list-group-disabled-bg:         @gray-lighter;
-//** Text color for content within disabled list items
-@list-group-disabled-text-color: @list-group-disabled-color;
-
-@list-group-link-color:         #555;
-@list-group-link-hover-color:   @list-group-link-color;
-@list-group-link-heading-color: #333;
-
-
-//== Panels
-//
-//##
-
-@panel-bg:                    #fff;
-@panel-body-padding:          15px;
-@panel-heading-padding:       10px 15px;
-@panel-footer-padding:        @panel-heading-padding;
-@panel-border-radius:         @border-radius-base;
-
-//** Border color for elements within panels
-@panel-inner-border:          #ddd;
-@panel-footer-bg:             #f5f5f5;
-
-@panel-default-text:          @gray-dark;
-@panel-default-border:        #ddd;
-@panel-default-heading-bg:    #f5f5f5;
-
-@panel-primary-text:          #fff;
-@panel-primary-border:        @brand-primary;
-@panel-primary-heading-bg:    @brand-primary;
-
-@panel-success-text:          #fff;
-@panel-success-border:        @state-success-border;
-@panel-success-heading-bg:    @brand-success;
-
-@panel-info-text:             #fff;
-@panel-info-border:           @state-info-border;
-@panel-info-heading-bg:       @brand-info;
-
-@panel-warning-text:          #fff;
-@panel-warning-border:        @state-warning-border;
-@panel-warning-heading-bg:    @brand-warning;
-
-@panel-danger-text:           #fff;
-@panel-danger-border:         @state-danger-border;
-@panel-danger-heading-bg:     @brand-danger;
-
-
-//== Thumbnails
-//
-//##
-
-//** Padding around the thumbnail image
-@thumbnail-padding:           4px;
-//** Thumbnail background color
-@thumbnail-bg:                @body-bg;
-//** Thumbnail border color
-@thumbnail-border:            #ddd;
-//** Thumbnail border radius
-@thumbnail-border-radius:     @border-radius-base;
-
-//** Custom text color for thumbnail captions
-@thumbnail-caption-color:     @text-color;
-//** Padding around the thumbnail caption
-@thumbnail-caption-padding:   9px;
-
-
-//== Wells
-//
-//##
-
-@well-bg:                     #f5f5f5;
-@well-border:                 transparent;
-
-
-//== Badges
-//
-//##
-
-@badge-color:                 #fff;
-//** Linked badge text color on hover
-@badge-link-hover-color:      #fff;
-@badge-bg:                    @gray-light;
-
-//** Badge text color in active nav link
-@badge-active-color:          @link-color;
-//** Badge background color in active nav link
-@badge-active-bg:             #fff;
-
-@badge-font-weight:           normal;
-@badge-line-height:           1;
-@badge-border-radius:         10px;
-
-
-//== Breadcrumbs
-//
-//##
-
-@breadcrumb-padding-vertical:   8px;
-@breadcrumb-padding-horizontal: 15px;
-//** Breadcrumb background color
-@breadcrumb-bg:                 #f5f5f5;
-//** Breadcrumb text color
-@breadcrumb-color:              #ccc;
-//** Text color of current page in the breadcrumb
-@breadcrumb-active-color:       @gray-light;
-//** Textual separator for between breadcrumb elements
-@breadcrumb-separator:          "/";
-
-
-//== Carousel
-//
-//##
-
-@carousel-text-shadow:                        0 1px 2px rgba(0,0,0,.6);
-
-@carousel-control-color:                      #fff;
-@carousel-control-width:                      15%;
-@carousel-control-opacity:                    .5;
-@carousel-control-font-size:                  20px;
-
-@carousel-indicator-active-bg:                #fff;
-@carousel-indicator-border-color:             #fff;
-
-@carousel-caption-color:                      #fff;
-
-
-//== Close
-//
-//##
-
-@close-font-weight:           normal;
-@close-color:                 #000;
-@close-text-shadow:           none;
-
-
-//== Code
-//
-//##
-
-@code-color:                  #c7254e;
-@code-bg:                     #f9f2f4;
-
-@kbd-color:                   #fff;
-@kbd-bg:                      #333;
-
-@pre-bg:                      #f5f5f5;
-@pre-color:                   @gray-dark;
-@pre-border-color:            #ccc;
-@pre-scrollable-max-height:   340px;
-
-
-//== Type
-//
-//##
-
-//** Horizontal offset for forms and lists.
-@component-offset-horizontal: 180px;
-//** Text muted color
-@text-muted:                  @gray-light;
-//** Abbreviations and acronyms border color
-@abbr-border-color:           @gray-light;
-//** Headings small color
-@headings-small-color:        @gray-light;
-//** Blockquote small color
-@blockquote-small-color:      @gray-light;
-//** Blockquote font size
-@blockquote-font-size:        (@font-size-base * 1.25);
-//** Blockquote border color
-@blockquote-border-color:     @gray-lighter;
-//** Page header border color
-@page-header-border-color:    @gray-lighter;
-//** Width of horizontal description list titles
-@dl-horizontal-offset:        @component-offset-horizontal;
-//** Point at which .dl-horizontal becomes horizontal
-@dl-horizontal-breakpoint:    @grid-float-breakpoint;
-//** Horizontal line color.
-@hr-border:                   @gray-lighter;

public/less/admin/settings.less

@@ -1,35 +0,0 @@
-.settings {
-	> .row {
-		margin-bottom: 30px;
-	}
-
-	.section-content {
-		border-left: 3px solid @brand-primary;
-
-		ul {
-			list-style-type: none;
-			font-size: 16px;
-			padding-left: 20px;
-		}
-	}
-
-	[data-action="upload"][type="text"] {
-		width: 95%;
-	}
-
-	.bootstrap-tagsinput {
-		width: 100%;
-		border: 0;
-		box-shadow: none;
-		padding-left: 0;
-
-		input {
-			width: 100%;
-			margin-left: 1px;
-			margin-top: 9px;
-			border-bottom: 1px dotted #ccc !important;
-			padding-bottom: 5px;
-			padding-left: 0;
-		}
-	}
-}

public/less/jquery-ui.less

@@ -1,10 +0,0 @@
-@import (inline) 'jquery-ui/themes/base/core.css';
-@import (inline) 'jquery-ui/themes/base/menu.css';
-@import (inline) 'jquery-ui/themes/base/button.css';
-@import (inline) 'jquery-ui/themes/base/datepicker.css';
-@import (inline) 'jquery-ui/themes/base/autocomplete.css';
-@import (inline) 'jquery-ui/themes/base/resizable.css';
-@import (inline) 'jquery-ui/themes/base/selectable.css';
-@import (inline) 'jquery-ui/themes/base/draggable.css';
-@import (inline) 'jquery-ui/themes/base/sortable.css';
-@import (inline) 'jquery-ui/themes/base/theme.css';

public/openapi/read.yaml

@@ -180,14 +180,6 @@ paths:
     $ref: 'read/user/username/username.yaml'
   "/api/user/email/{email}":
     $ref: 'read/user/email/email.yaml'
-  "/api/user/{userslug}/export/posts":
-    $ref: 'read/user/userslug/export/posts.yaml'
-  "/api/user/{userslug}/export/uploads":
-    $ref: 'read/user/userslug/export/uploads.yaml'
-  "/api/user/{userslug}/export/profile":
-    $ref: 'read/user/userslug/export/profile.yaml'
-  "/api/user/uid/{userslug}/export/{type}":
-    $ref: 'read/user/uid/userslug/export/type.yaml'
   /api/categories:
     $ref: 'read/categories.yaml'
   "/api/categories/{cid}/moderators":

public/openapi/read/user/userslug/export/posts.yaml

@@ -1,20 +0,0 @@
-get:
-  tags:
-    - users
-  summary: Export a user's posts (.csv)
-  description: This route retrieves an existing export of user's posts. To create one go to `/user/{userslug}/consent`
-  parameters:
-    - name: userslug
-      in: path
-      required: true
-      schema:
-        type: string
-      example: admin
-  responses:
-    "200":
-      description: "A CSV file containing a user's posts"
-      content:
-        text/csv:
-          schema:
-            type: string
-            format: binary

public/openapi/read/user/userslug/export/profile.yaml

@@ -1,20 +0,0 @@
-get:
-  tags:
-    - users
-  summary: Export a user's profile data (.json)
-  description: This route retrieves an existing export of user's profile data. To create one go to `/user/{userslug}/consent`
-  parameters:
-    - name: userslug
-      in: path
-      required: true
-      schema:
-        type: string
-      example: admin
-  responses:
-    "200":
-      description: "A JSON file containing the user profile"
-      content:
-        text/json:
-          schema:
-            type: string
-            format: binary

public/openapi/read/user/userslug/export/uploads.yaml

@@ -1,20 +0,0 @@
-get:
-  tags:
-    - users
-  summary: Export a user's uploads (.zip)
-  description: This route retrieves an existing export of user's profile data. To create one go to `/user/{userslug}/consent`
-  parameters:
-    - name: userslug
-      in: path
-      required: true
-      schema:
-        type: string
-      example: admin
-  responses:
-    "200":
-      description: Successful export of user uploads
-      content:
-        application/zip:
-          schema:
-            type: string
-            format: binary

public/scss/admin/admin.scss

@@ -1,8 +1,4 @@
-@import "bootstrap/less/bootstrap";
-@import "./paper/variables";
-@import "./paper/bootswatch";
 @import "./mixins";
-@import "./vars";
 
 @import "./header";
 @import "./mobile";
@@ -13,24 +9,13 @@
 @import "./manage/privileges";
 @import "./manage/tags";
 @import "./manage/groups";
-@import "./manage/registration";
-@import "./manage/users";
-@import "./manage/admins-mods";
 @import "./appearance/customise";
-@import "./appearance/themes";
 @import "./extend/plugins";
 @import "./extend/rewards";
 @import "./extend/widgets";
 @import "./advanced/database";
-@import "./advanced/events";
-@import "./advanced/logs";
-@import "./advanced/errors";
-@import "./advanced/hooks";
-@import "./development/info";
 @import "./settings";
 
-@import "../flags";
-
 @import "./modules/alerts";
 @import "./modules/selectable";
 @import "./modules/nprogress";
@@ -46,7 +31,6 @@ body {
 
 	h1 {
 		font-size: 35px;
-		margin-bottom: 50px;
 	}
 
 	label {
@@ -54,13 +38,15 @@ body {
 		height: auto;
 	}
 
-
 	.btn {
 		border-radius: 0;
 	}
-
-	.btn-link {
-		color: @link-color;
+	.btn-outline-secondary {
+		color: $gray-700;
+		box-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important;
+		&:hover {
+			background-color: $gray-200 !important;
+		}
 	}
 
 	// .floating-button can either be a container or the button itself
@@ -68,16 +54,16 @@ body {
 		position: fixed;
 		right: 30px;
 		bottom: 30px;
-		z-index: 1;
+		z-index: 2;
 		max-width: 56px;
 
 		button {
 			&.primary {
-				background: @brand-primary !important;
+				background: $primary !important;
 			}
 
 			&.success {
-				background: @brand-success !important;
+				background: $success !important;
 			}
 
 			&:not(:last-child) {
@@ -86,12 +72,7 @@ body {
 		}
 	}
 	button.floating-button {
-		background: @brand-primary !important;
-	}
-
-	.user-img {
-		width:24px;
-		height:24px;
+		background: $primary !important;
 	}
 
 	.nodebb-logo {
@@ -102,7 +83,7 @@ body {
 			vertical-align: -43%;
 		}
 
-		.box-header-font;
+		@include box-header-font;
 		color: #fff;
 	}
 
@@ -110,48 +91,52 @@ body {
 		cursor: default;
 	}
 
-	.acp-panel-heading {
+	@mixin acp-panel-heading() {
 		padding: 7px 14px;
 		border: 0;
-		.box-header-font;
+		@include box-header-font;
 	}
 
-	.panel:not([data-container-html]) {
+	.card:not([data-container-html]) {
 		background-color: #FFF;
 		box-sizing: border-box;
 		border-radius: 3px;
+		border-width: 0px;
 		box-shadow: 0px 1px 3px 0px rgba(165, 165, 165, 0.75);
 		margin-bottom: 20px;
 
-		&.panel-default >.panel-heading {
-			.acp-panel-heading;
+		>.card-header {
+			@include acp-panel-heading;
 			background: #fefefe;
 			color: #333;
 		}
 
-		&.panel-danger >.panel-heading {
-			.acp-panel-heading;
+		&.card-danger >.card-header {
+			@include acp-panel-heading;
 		}
 	}
 
 	.nav-header {
-		.box-header-font
+		@include box-header-font;
 	}
 
 	.icon-container {
-		.row {
+		.fa-nbb-none {
+			border: 1px dotted black;
+		}
+		.nbb-fa-icons {
 			margin: 0;
 			i {
-				width:20px;
-				height:20px;
-				margin: 1px;
-				.pointer;
-				line-height: 20px;
+				width: 24px;
+				height: 24px;
+				cursor: pointer;
+				line-height: 24px;
 				text-align: center;
-				color: @gray-dark;
+				color: $gray-800;
+				margin: 3px;
 
 				&:hover, &.selected {
-					background: @brand-primary;
+					background: $primary;
 					color: white;
 				}
 			}
@@ -167,26 +152,13 @@ body {
     }
 
     .navbar-nav {
-        margin-top: 0;
-        margin-bottom: 0;
-
-        >li {
-            >a {
-                padding-top: 15px;
-                padding-bottom: 15px;
-            }
-
-            >a:hover, >a:focus {
-                color: @gray-dark;
-                background-color: @gray-light;
-            }
-
+	    >li {
             >#reconnect {
-                color: @gray-light;
+                color: $gray-700;
             }
 
             >#reconnect:focus, >#reconnect:hover {
-                color: @gray-light;
+                color: $gray-700;
                 background-color: transparent;
             }
         }
@@ -198,7 +170,23 @@ body {
 
 	/* Allows the autocomplete dropbox to appear on top of a modal's backdrop */
 	.ui-autocomplete {
-		z-index: @zindex-popover;
+		z-index: $zindex-popover;
+	}
+
+	.bootstrap-tagsinput {
+		width: 100%;
+		border: 0;
+		box-shadow: none;
+		padding-left: 0;
+
+		input {
+			width: 100%;
+			margin-left: 1px;
+			margin-top: 9px;
+			border-bottom: 1px dotted #ccc !important;
+			padding-bottom: 5px;
+			padding-left: 0;
+		}
 	}
 }
 
@@ -211,16 +199,16 @@ body {
 .category-settings-form {
 	h3 {
 		margin-top: 0;
-		.pointer;
+		cursor: pointer;
 	}
 
 	h4 {
-		.pointer;
+		cursor: pointer;
 	}
 }
 
 .category-preview {
-	.pointer;
+	cursor: pointer;
 	width: 100%;
 	height: 100px;
 	text-align: center;
@@ -235,13 +223,16 @@ body {
 		margin: 35px 5px 0 5px;
 	}
 }
+
+.category-dropdown-container.right .category-dropdown-menu {
+	--bs-position: end;
+}
+
 [component="category-selector"] {
-	.fa-stack {
-		border-radius: 50%;
-	}
 	.category-dropdown-menu {
-		max-height: 400px;
+		max-height: 500px;
 		overflow-y: auto;
+		overflow-x: hidden;
 	}
 }
 
@@ -267,11 +258,11 @@ body {
 }
 
 .mdl-switch.is-checked .mdl-switch__thumb {
-	background: @brand-primary !important;
+	background: $primary !important;
 }
 
 .mdl-switch.is-checked .mdl-switch__track {
-	background: lighten(@brand-primary, 20%) !important;
+	background: lighten($primary, 20%) !important;
 }
 
 * > .checkbox:first-child {
@@ -283,11 +274,21 @@ body {
 }
 
 .ui-selectable-helper {
-	border: 1px dashed @brand-success;
-	background: lighten(@brand-success, 10%);
+	border: 1px dashed $success;
+	background: lighten($success, 10%);
 	opacity: 0.5;
 }
 
 form small {
-	color: @gray-light;
+	color: $gray-700;
+}
+
+.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;
 }

public/scss/admin/advanced/database.scss

@@ -4,20 +4,3 @@
 		width:220px;
 	}
 }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

public/scss/admin/appearance/customise.scss

@@ -6,4 +6,4 @@
 // ACP text colour when searching through custom CSS or JS.
 .ace_search_field {
  color: #000 !important;
-}
+}

public/scss/admin/extend/plugins.scss

@@ -21,7 +21,7 @@
 
 	.plugin-list.ui-sortable {
 		li {
-			.pointer;
+			cursor: pointer;
 
 			.fa-chevron-up {
 				margin-right: 10px;
@@ -37,13 +37,13 @@
 
 			&:first-child .fa-chevron-up, &:last-child .fa-chevron-down {
 				pointer-events: none;
-				color: @gray-light;
+				color: $gray-300;
 			}
 		}
 	}
 	.controls .btn {
 		display: list-item;
-		width: 120px;
+		width: 150px;
 		margin-bottom: 3px;
 		margin-left: 10px;
 	}

public/scss/admin/extend/rewards.scss

@@ -1,13 +1,4 @@
 #rewards {
-	.well, .panel-body {
-		vertical-align: top;
-		min-height: 100px;
-
-		&.pull-right {
-			min-height: 0px;
-		}
-	}
-
 	ul {
 		list-style-type: none;
 		padding: 0px;
@@ -24,26 +15,26 @@
 
 	.rewards { width: 100%; }
 
-	.well {
+	.card {
 		border-radius: 2px;
 		border-width: 2px;
 		color: #333;
 
 		&.if-block {
-			border-color: @brand-primary;
+			border-color: $primary;
 			max-width: 33%;
 		}
 		&.this-block {
-			border-color: @brand-warning;
+			border-color: $warning;
 			max-width: 33%;
 		}
 		&.then-block {
-			border-color: @brand-success;
+			border-color: $success;
 			max-width: 33%;
 		}
 		&.reward-block {
-			border-color: @brand-success;
-			background-color: lighten(@brand-success, 15%);
+			border-color: $success;
+			background-color: lighten($success, 15%);
 			color: #fff;
 			a, select, input { color: #fff; }
 			select > option { color: #333; }

public/scss/admin/extend/widgets.scss

@@ -1,4 +1,4 @@
-.page-extend-widgets {
+.page-admin-extend.page-admin-widgets {
 	[component="clone"] {
 		display: flex;
 		align-items: stretch;
@@ -16,4 +16,13 @@
 			border-radius: 0;
 		}
 	}
-}
+	.container-hover {
+		.container-html {
+			// border: 1px solid red!important;
+			@extend .border;
+			@extend .border-2;
+			@extend .border-primary;
+		}
+	}
+
+}

public/scss/admin/general/dashboard.scss

@@ -1,25 +1,25 @@
 .dashboard {
 	max-width: 1680px;
 
-	.panel {
+	.card {
 		max-width: 100% !important;
 	}
 
-	#analytics-panel .panel-heading > div {
+	#analytics-panel .card-header > div {
 		&.fa-expand {
 			display: none;
 		}
 
-		font-family: @font-family-sans-serif;
+		font-family: $font-family-sans-serif;
 		font-weight: 600;
-		color: @gray-dark;
+		color: $gray-300;
 		padding-left: .5em;
 
 		padding: .75em;
-		background-color: @gray-lighter;
-		color: @gray-base;
+		background-color: $gray-200;
+		color: $black;
 		cursor: pointer;
-		.transition(all .4s);
+		transition: all .4s;
 
 		&.active {
 			display: inline;
@@ -29,12 +29,12 @@
 	.graph-container {
 		padding-right: 50px;
 		position: relative;
-		background: @body-bg;
+		background: $body-bg;
 
 		&:hover {
 			.fa-expand {
-				color: @gray-lighter;
-				background-color: @gray-base;
+				color: $gray-800;
+				background-color: $black;
 			}
 		}
 
@@ -94,7 +94,7 @@
 		}
 
 		.graph-legend {
-			.box-header-font;
+			@include box-header-font;
 			display: inline-block;
 			max-width: 100%;
 			position: absolute;

public/scss/admin/general/navigation.scss

@@ -24,6 +24,10 @@
 
 		li {
 			display: inline-block;
+			>a:hover, >a:focus {
+                color: $gray-300;
+                background-color: $gray-700;
+            }
 		}
 	}
 

public/scss/admin/header.scss

@@ -1,5 +1,5 @@
 .header {
-	.no-select;
+	user-select: none;
 	position: relative;
 	background: #333;
 	width: 100%;
@@ -10,7 +10,7 @@
 	#main-page-title {
 		position: absolute;
 		left: 48px;
-		bottom: 17px;
+		bottom: 50px;
 		color: #aaa;
 		font-size: 47px;
 		font-weight: 300;
@@ -23,10 +23,6 @@
 		flex-direction: row-reverse;
 		margin: 0;
 
-		li {
-			align-self: end;
-		}
-
 		> * {
 			margin-right: 20px;
 		}
@@ -38,7 +34,7 @@
 
 		.alert {
 			font-size: 14px;
-			margin-bottom: 5px;
+			margin-bottom: 0px;
 
 			&.alert-info {
 				background-color: #eee;
@@ -75,10 +71,10 @@
 			padding: 10px 20px;
 			width: 250px;
 			height: 44px;
-			background-color: rgba(0, 0, 0, 0.2);
+			background-color: rgba(0,0,0,.2);
 			border-radius: 3px;
 			box-shadow: none;
-			.transition(.4s ease background-color);
+			transition: .4s ease background-color;
 
 			&:focus {
 				background-color: #eee;
@@ -89,7 +85,7 @@
 		.dropdown:not(.open) {
 			&:before {
 				content: '/';
-				border: 1px solid @gray;
+				border: 1px solid $gray-500;
 				border-radius: 5px;
 				padding: 0px 6px;
 				font-size: 12px;
@@ -97,14 +93,14 @@
 				pointer-events: none;
 
 				position: absolute;
-				top: 10px;
+				top: 13px;
 				left: 1em;
 			}
 
 			&:after {
 				content: attr(data-text);
 				position: absolute;
-				top: 10px;
+				top: 13px;
 				left: 3em;
 				font-size: small;
 				font-weight: 600;
@@ -130,7 +126,7 @@
 		list-style-type: none;
 		padding: 0px;
 		position: absolute;
-		bottom: -11px;
+		bottom: -16px;
 		left: 50px;
 
 		> li {
@@ -140,11 +136,11 @@
 			transition: border-color 150ms linear;
 
 			&:hover {
-				border-color: darken(@brand-primary, 20%);
+				border-color: darken($primary, 20%);
 			}
 
 			&.active {
-				border-color: @brand-primary;
+				border-color: $primary;
 			}
 
 			> a {

public/scss/admin/manage/categories.scss

@@ -1,6 +1,6 @@
 div.categories {
 	ul[data-cid] {
-		.no-select;
+		user-select: none;
 		list-style-type: none;
 		margin: 0;
 		padding: 0;
@@ -73,22 +73,6 @@ div.categories {
 	.information {
 		cursor: move;
 		padding-left: 3rem;
-
-		.icon {
-			width: 24px;
-			height: 24px;
-			border-radius: 50%;
-			line-height: 24px;
-			text-align: center;
-			vertical-align: bottom;
-			background-size: cover;
-			float: left;
-			margin-right: 1rem;
-
-			.fa {
-				font-size: 85%;
-			}
-		}
 	}
 
 	.category-header {
@@ -111,25 +95,5 @@ div.categories {
 		tr > th:first-child {
 			min-width: 150px;
 		}
-
-		.privilege-table-header {
-			background: white;
-
-			th {
-				text-align: center;
-				border-top: 0;
-				text-transform: uppercase;
-				font-size: 9px;
-				vertical-align: bottom;
-			}
-
-			.arrowed:after {
-				border-bottom: 1px dashed #ccc;
-				content: "";
-				width: 100%;
-				display: block;
-				padding-top: 5px;
-			}
-		}
 	}
 }

public/scss/admin/manage/groups.scss

@@ -35,16 +35,6 @@
 	[component="category/list"] li {
 		cursor: pointer;
 	}
-	
-	.fa-nbb-none {
-		border: 1px dotted black;
-		height: 35px;
-		width: 35px;
-	}
-
-	.fa-icons .fa-nbb-none {
-		vertical-align: -6px;
-	}
 
 	#group-icon-preview.fa-nbb-none {
 		display: none;

public/scss/admin/manage/privileges.scss

@@ -1,6 +1,6 @@
 .page-admin-privileges {
 	@keyframes fadeOut {
-		0% {background-color: @brand-primary;}
+		0% {background-color: $primary;}
 		100% {background-color: white;}
 	}
 
@@ -18,18 +18,18 @@
 
 		td[data-delta="true"] > input {
 			&:after {
-				border-color: @state-success-text;
-				background-color: @state-success-text;
+				border-color: $success;
+				background-color: $success;
 			}
 		}
 
 		td[data-delta="false"] > input {
 			&:after {
-				border-color: @state-danger-bg;
+				border-color: $danger;
 			}
 
 			&:indeterminate:after {
-				background-color: @state-danger-bg;
+				background-color: $danger;
 			}
 		}
 	}

public/scss/admin/manage/tags.scss

@@ -16,11 +16,11 @@
 			}
 
 			&.ui-selected {
-				background: lighten(@brand-success, 25%);
+				background: lighten($success, 25%);
 			}
 
 			&.ui-selecting {
-				background: lighten(@brand-success, 40%);
+				background: lighten($success, 40%);
 			}
 		}
 	}

public/scss/admin/mixins.scss

@@ -1,6 +1,6 @@
 @import "../mixins";
 
-.box-header-font {
+@mixin box-header-font() {
 	font-size: 11px;
 	text-transform: uppercase;
 	font-weight: 700;

public/scss/admin/mobile.scss

@@ -6,7 +6,7 @@
 	body {
 		height: 100%;
 	}
-	
+
 	#panel {
 		background-color: inherit;
 		min-height: 100%;
@@ -93,7 +93,7 @@
 				display: flex;
 				justify-content: center;
 			}
-			
+
 			.alert {
 				border-radius: 0;
 
@@ -170,7 +170,7 @@
 		height: 100%;
 		overflow-y: hidden;
 	}
-	
+
 	.slideout-open {
 		overflow-y: hidden;
 		height: 100%;

public/scss/admin/modules/alerts.scss

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

public/scss/admin/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: 165px;
+	right: 35px;
+  }
+
+  @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); }
+  }
+

public/scss/admin/modules/search.scss

@@ -4,9 +4,9 @@
         overflow-y: auto;
 
         > li > a {
-            &.focus {
-                &:extend(.dropdown-menu>li>a:focus);
-            }
+            // &.focus {
+            //     &:extend(.dropdown-menu>li>a:focus);
+            // }
             &:focus {
                 outline: none;
             }

public/scss/admin/modules/selectable.scss

@@ -1,5 +1,5 @@
 .selectable {
-	.user-select(none);
+	user-select: none;
 	position: relative;
 
 	.selector {
@@ -19,5 +19,5 @@
 			background-color: #ECF1DB;
 			border: 1px dashed #9B8;
 		}
-	}	
+	}
 }

public/scss/admin/settings.scss

@@ -0,0 +1,20 @@
+.settings {
+	.section-content {
+		border-left: 3px solid $primary;
+
+		ul {
+			list-style-type: none;
+			font-size: 16px;
+			padding-left: 20px;
+			li:not(:last-child) {
+				margin-bottom: 5px;
+			}
+			a {
+				text-decoration: none;
+				&:hover{
+					text-decoration: underline;
+				}
+			}
+		}
+	}
+}

public/scss/admin/vars.scss

@@ -16,5 +16,30 @@
 //   "Apple Color Emoji"                 : Emoji on iOS and MacOS
 //   "Segoe UI Emoji", "Segoe UI Symbol" : Emoji on Windows
 //   "Noto Color Emoji"                  : Emoji on Android
-@font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-@font-family-sans-serif: @font-family-system;
+$font-family-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif: $font-family-system;
+$font-size-base: 0.875rem!default;
+
+$body-color: #666!default;
+$light: #f5f5f5;
+
+// options
+$enable-gradients: false;
+// no caret on dropdown-toggle
+$enable-caret: false;
+
+$font-size-base:            1rem !default;
+$font-weight-base:          400 !default;
+
+// Buttons
+$input-btn-padding-y:       .4rem !default;
+$input-btn-padding-x:       1rem !default;
+
+// Forms
+
+$input-padding-y:                0.4rem !default;
+$input-padding-x:                0 !default;
+$input-padding-y-sm:             0 !default;
+$input-padding-x-sm:             0 !default;
+$input-padding-y-lg:             ($font-size-base * 1.25) !default;
+$input-padding-x-lg:             0 !default;

public/scss/client.scss

@@ -0,0 +1,6 @@
+// core scss files shared by all themes
+@import "flags";
+@import "global";
+@import "modals";
+@import "modules/picture-switcher";
+@import "modules/bottom-sheet";

public/scss/flags.scss

@@ -26,7 +26,7 @@
 				list-style-type: none;
 
 				img, .user-icon {
-					.user-icon-style(18px, 1rem);
+					@include user-icon-style(18px, 1rem);
 					margin-right: 1rem;
 				}
 			}
@@ -35,7 +35,7 @@
 
 	.flag-post-body {
 		img, .user-icon {
-			.user-icon-style(24px, 1.5rem);
+			@include user-icon-style(24px, 1.5rem);
 		}
 	}
 

public/scss/fontawesome.scss

@@ -0,0 +1,6 @@
+@import "../public/vendor/fontawesome/scss/fontawesome";
+@import "../public/vendor/fontawesome/scss/regular";
+@import "../public/vendor/fontawesome/scss/solid";
+@import "../public/vendor/fontawesome/scss/brands";
+@import "../public/vendor/fontawesome/scss/v4-shims";
+@import "../public/vendor/fontawesome/scss/nodebb-shims";

public/scss/generics.scss

@@ -1,24 +1,6 @@
-.define-if-not-set() {
-	@gray-base:              #000;
-	@gray-darker:            lighten(@gray-base, 13.5%); // #222
-	@gray-dark:              lighten(@gray-base, 20%);   // #333
-	@gray:                   lighten(@gray-base, 33.5%); // #555
-	@gray-light:             lighten(@gray-base, 46.7%); // #777
-	@gray-lighter:           lighten(@gray-base, 93.5%); // #eee
 
-	@brand-primary:         darken(#428bca, 6.5%); // #337ab7
-	@brand-success:         #5cb85c;
-	@brand-info:            #5bc0de;
-	@brand-warning:         #f0ad4e;
-	@brand-danger:          #d9534f;
-}
-
-.define-if-not-set();
-
-#move_thread_modal .category-list {
-	height: 500px;
-	overflow-y: auto;
-	overflow-x: hidden;
+.pointer {
+	@include pointer;
 }
 
 .topic-watch-dropdown {
@@ -27,18 +9,49 @@
 	}
 }
 
+[component="category-selector"], .category-dropdown-container {
+	#category-dropdown-check:checked + .dropdown-menu {
+		display: block;
+	}
+}
+
+.category-dropdown-container.right .category-dropdown-menu {
+	--bs-position: end;
+}
+
+.category-dropdown-menu {
+	max-height: 500px;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+.moderator-tools .dropdown-menu {
+	min-height: 200px;
+}
+
+.bootstrap-tagsinput {
+	@extend .form-control;
+	box-shadow: none;
+	input {
+		&::placeholder{
+			color: $input-placeholder-color;
+		}
+		color: $input-color;
+	}
+}
+
 .category-list {
 	padding: 0;
 
 	li {
-		.inline-block;
-		.pointer;
+		@include inline-block;
+		@include pointer;
 		padding: 0.5em;
 		margin: 0.25em;
-		.border-radius(3px);
+		@include border-radius(3px);
 
 		&.disabled {
-			background-color: #888!important;
+			background-color: $gray-600!important;
 			opacity: 0.5;
 		}
 	}
@@ -49,13 +62,13 @@
 	padding-top: 1rem;
 
 	li {
-		.pointer;
+		@include pointer;
 		display: inline-block;
 		list-style-type: none;
 		padding: 0.5rem 1rem;
 
 		&:hover {
-			background: #eee;
+			background: $gray-300;
 		}
 
 		.avatar  {
@@ -70,10 +83,10 @@
 	}
 }
 
-.user-icon {
+@mixin user-icon() {
 	display: inline-block;
 	text-align: center;
-	color: @gray-lighter;
+	color: $gray-200;
 	font-weight: normal;
 	vertical-align: middle;
 	overflow: hidden;	/* stops alt text from overflowing past boundaries if image does not load */
@@ -89,47 +102,18 @@
 
 .avatar {
 	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
-	.user-icon;
+	@include user-icon;
 
-	&.avatar-xs {
-		width: 16px;
-		height: 16px;
-		.user-icon-style(16px, 1rem);
-	}
-
-	&.avatar-sm {
-		width: 24px;
-		height: 24px;
-		.user-icon-style(24px, 1.5rem);
-	}
-
-	&.avatar-sm2x {
-		width: 48px;
-		height: 48px;
-		.user-icon-style(48px, 1.5rem);
-	}
-
-	&.avatar-md {
-		width: 32px;
-		height: 32px;
-		.user-icon-style(32px, 1.5rem);
-	}
-
-	&.avatar-lg {
-		width: 64px;
-		height: 64px;
-		.user-icon-style(64px, 4rem);
-	}
-
-	&.avatar-xl {
-		width: 128px;
-		height: 128px;
-		.user-icon-style(128px, 7.5rem);
-	}
+	$size: var(--avatar-size);
+	@include user-icon-style($size, calc($size * 0.6));
 
 	&.avatar-rounded {
 		border-radius: 50%;
 	}
+
+	&+.avatar {
+		display: none;
+	}
 }
 
 .ban-modal {
@@ -157,9 +141,6 @@
 }
 
 .necro-post {
-	color: rgba(127,127,127,.5);
-	font-size: 1.5em;
-	margin-bottom: 20px;
 	text-align: center;
 	text-transform: uppercase;
 }
@@ -178,7 +159,39 @@
 	position: absolute;
 	text-align: center;
 	font-size: 24px;
-	color: @gray-light;
+	color: $gray-600;
 	width: 100%;
 	display: none;
+}
+
+.hover-parent {
+	.hover-d-block, .hover-d-flex {
+		display: none!important;
+	}
+	&:hover {
+		.hover-d-block {
+			display: block!important;
+		}
+		.hover-d-flex {
+			display: flex!important;
+		}
+	}
+}
+
+.border-muted {
+	border-color: $text-muted!important;
+}
+
+// some classes that are used commonly in themes from bs3
+.hidden, .hide {
+    display: none!important;
+}
+
+// for backwards compat, replace with float-start, float-end respectively
+.pull-left {
+	float: left!important;
+}
+
+.pull-right {
+	float: right!important;
 }

public/scss/install.scss

@@ -1,5 +1,9 @@
 @import "./admin/vars";
 
+.hidden, .hide {
+    display: none!important;
+}
+
 .working {
   width: 24px;
   height: 24px;
@@ -7,7 +11,7 @@
   position: relative;
 	display: inline-block;
 	vertical-align: bottom;
-	
+
 	&::before, &::after {
 		content: ' ';
 
@@ -19,11 +23,11 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		
+
 		-webkit-animation: sk-bounce 2.0s infinite ease-in-out;
 		animation: sk-bounce 2.0s infinite ease-in-out;
 	}
-	
+
 	&::after {
 		-webkit-animation-delay: -1.0s;
 		animation-delay: -1.0s;
@@ -36,10 +40,10 @@
 }
 
 @keyframes sk-bounce {
-  0%, 100% { 
+  0%, 100% {
     transform: scale(0.0);
     -webkit-transform: scale(0.0);
-  } 50% { 
+  } 50% {
     transform: scale(1.0);
     -webkit-transform: scale(1.0);
   }
@@ -55,7 +59,7 @@
 }
 
 body, small, p, div {
-	font-family: @font-family-sans-serif;
+	font-family: $font-family-sans-serif;
 }
 
 .input-row {

public/scss/jquery-ui.scss

@@ -0,0 +1,10 @@
+@import 'jquery-ui/themes/base/core';
+@import 'jquery-ui/themes/base/menu';
+@import 'jquery-ui/themes/base/button';
+@import 'jquery-ui/themes/base/datepicker';
+@import 'jquery-ui/themes/base/autocomplete';
+@import 'jquery-ui/themes/base/resizable';
+@import 'jquery-ui/themes/base/selectable';
+@import 'jquery-ui/themes/base/draggable';
+@import 'jquery-ui/themes/base/sortable';
+@import 'jquery-ui/themes/base/theme';

public/scss/mixins.scss

@@ -1,4 +1,4 @@
-.no-select {
+@mixin no-select() {
 	-webkit-touch-callout: none;
 	-webkit-user-select: none;
 	-khtml-user-select: none;
@@ -7,22 +7,22 @@
 	user-select: none;
 }
 
-.pointer {
+@mixin pointer() {
 	cursor: pointer;
 	*cursor: hand;
 }
 
-.inline-block {
+@mixin inline-block() {
 	display: inline-block;
 	*display: inline;
 	zoom: 1;
 }
 
-.clear {
+@mixin clear() {
 	clear: both;
 }
 
-.zebra {
+@mixin zebra() {
 	&:nth-child(even) {
 		background: rgba(191,191,191,0.2);
 	}
@@ -32,21 +32,21 @@
 	}
 }
 
-.border-radius (@radius: 5px) {
-	-webkit-border-radius: @radius;
-	-moz-border-radius: @radius;
-	-ms-border-radius: @radius;
-	-o-border-radius: @radius;
-	border-radius: @radius;
+@mixin 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 {
+@mixin text-ellipsis() {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
-.fix-lists {
+@mixin fix-lists() {
 	ul {
 		> li {
 			list-style-type: disc;
@@ -66,15 +66,10 @@
 	}
 }
 
-.user-icon-style(@size: 32px, @font-size: 1.5rem, @border-radius: inherit) {
-	border-radius: @border-radius;
-	width: @size;
-	height: @size;
-	line-height: @size;
-	font-size: @font-size;
+@mixin user-icon-style($size: 32px, $font-size: 1.5rem, $border-radius: inherit){
+	border-radius: $border-radius;
+	width: $size;
+	height: $size;
+	line-height: $size;
+	font-size: $font-size;
 }
-
-.box-shadow(@shadow) {
-	-webkit-box-shadow: @shadow;
-	box-shadow: @shadow;
-}

public/scss/modals.scss

@@ -2,10 +2,13 @@
 	position: fixed;
 	bottom: 10%;
 	right: 2rem;
-	z-index: 1;
+	z-index: $zindex-modal;
+	.category-dropdown-menu {
+		min-height: 300px;
+	}
 }
 
-@media screen and (min-width: @screen-sm-min) {
+@include media-breakpoint-up(sm) {
 	.tool-modal {
 		max-width: 33%;
 	}

public/scss/modules/bottom-sheet.scss

@@ -0,0 +1,51 @@
+.bottom-sheet {
+	@include media-breakpoint-down(sm) {
+		.dropdown-menu {
+			display: block;
+			visibility: hidden;
+
+			position: fixed!important;
+			inset: auto 0 0 0!important;
+
+			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;
+				}
+			}
+		}
+
+		.dropdown-menu.show {
+			transform: none!important;
+			visibility: visible;
+			transition-delay: 0s;
+			top: auto;
+			width: auto;
+		}
+
+		.dropdown-backdrop {
+			background-color: rgba(0, 0, 0, .3);
+		}
+	}
+}

public/scss/modules/picture-switcher.scss

@@ -0,0 +1,69 @@
+.picture-switcher {
+	img, .user-icon {
+		@include user-icon-style(46px, 2.4rem, 50%);
+	}
+
+	@include media-breakpoint-down(sm) {
+		img, .user-icon {
+			display: none;
+		}
+	}
+
+	h4 {
+		line-height: 46px;
+		margin: 0;
+	}
+
+	.modal-body .btn {
+		padding: 10px 5px;
+		font-size: 13px;
+	}
+
+	label {
+		vertical-align: top;
+		line-height: 26px;
+
+		> input[type="radio"] {
+			display: none;
+
+			&:checked {
+				+ span:before {
+					border-radius: 50%;
+					border: 2px solid $primary;
+					position: relative;
+					top: -4px;
+					left: -4px;
+				}
+			}
+
+			&[value="transparent"] {
+				&:checked + span:before {
+					padding-top: 2px;
+					padding-left: 2px;
+				}
+
+				+ span:before {
+					content: '\f05e';
+					font-family: FontAwesome;
+					color: $gray-200;
+					font-size: 28px;
+				}
+			}
+		}
+
+		span {
+			display: inline-block;
+			width: 24px;
+			height: 24px;
+			border-radius: 50%;
+			margin-right: .5em;
+
+			&:before {
+				content: '';
+				display: inline-block;
+				width: 32px;
+				height: 32px;
+			}
+		}
+	}
+}

public/scss/overrides.scss

@@ -0,0 +1 @@
+// global bs5 overrides if necessary

public/scss/responsive-utilities.scss

@@ -0,0 +1,163 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+// ported to scss from bs3 less
+@mixin responsive-visibility() {
+	display: block !important;
+	// TODO: fix for scss
+	// table&  { display: table; }
+	// tr&     { display: table-row !important; }
+	// th&,
+	// td&     { display: table-cell !important; }
+}
+
+@mixin responsive-invisibility() {
+	display: none !important;
+}
+
+
+// Visibility utilities
+// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
+.visible-xs,
+.visible-sm,
+.visible-md,
+.visible-lg {
+	@include responsive-invisibility();
+}
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block {
+	display: none !important;
+}
+
+.visible-xs {
+	@include media-breakpoint-down(sm) {
+		@include responsive-visibility();
+	}
+}
+
+.visible-xs-block {
+	@include media-breakpoint-down(sm) {
+		display: block !important;
+	}
+}
+.visible-xs-inline {
+	@include media-breakpoint-down(sm) {
+		display: inline !important;
+	}
+}
+.visible-xs-inline-block {
+	@include media-breakpoint-down(sm) {
+		display: inline-block !important;
+	}
+}
+
+.visible-sm {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		@include responsive-visibility();
+	}
+}
+.visible-sm-block {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		display: block !important;
+	}
+}
+.visible-sm-inline {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		display: inline !important;
+	}
+}
+.visible-sm-inline-block {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+	@include media-breakpoint-between(sm, md) {
+		display: inline-block !important;
+	}
+}
+
+.visible-md {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		@include responsive-visibility();
+	}
+}
+.visible-md-block {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		display: block !important;
+	}
+}
+.visible-md-inline {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		display: inline !important;
+	}
+}
+.visible-md-inline-block {
+	// @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+	@include media-breakpoint-between(md, lg) {
+		display: inline-block !important;
+	}
+}
+
+.visible-lg {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		@include responsive-visibility();
+	}
+}
+.visible-lg-block {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		display: block !important;
+	}
+}
+.visible-lg-inline {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		display: inline !important;
+	}
+}
+.visible-lg-inline-block {
+	// @media (min-width: @screen-lg-min) {
+	@include media-breakpoint-up(lg) {
+		display: inline-block !important;
+	}
+}
+
+.hidden-xs {
+	@include media-breakpoint-down(sm) {
+		@include responsive-invisibility();
+	}
+}
+.hidden-sm {
+	@include media-breakpoint-between(sm, md) {
+	// @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
+		@include responsive-invisibility();
+	}
+}
+.hidden-md {
+	@include media-breakpoint-between(md, lg) {
+	//@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
+		@include responsive-invisibility();
+	}
+}
+.hidden-lg {
+	@include media-breakpoint-up(lg) {
+	//@media (min-width: @screen-lg-min) {
+		@include responsive-invisibility();
+	}
+}

public/src/admin/admin.js

@@ -163,7 +163,7 @@ app.onDomReady();
 			// need to preload the compiled alert template
 			// otherwise it can be unloaded when rebuild & restart is run
 			// the client can't fetch the template file, resulting in an error
-			benchpress.render('alert', {}).then(function () {
+			benchpress.render('partials/toast', {}).then(function () {
 				$('.rebuild-and-restart').off('click').on('click', function () {
 					bootbox.confirm('[[admin/admin:alert.confirm-rebuild-and-restart]]', function (confirm) {
 						if (confirm) {

public/src/admin/advanced/logs.js

@@ -7,8 +7,6 @@ define('admin/advanced/logs', ['alerts'], function (alerts) {
 	Logs.init = function () {
 		const logsEl = $('.logs pre');
 		logsEl.scrollTop(logsEl.prop('scrollHeight'));
-		// Affix menu
-		$('.affix').affix();
 
 		$('.logs').find('button[data-action]').on('click', function () {
 			const btnEl = $(this);
@@ -16,21 +14,14 @@ define('admin/advanced/logs', ['alerts'], function (alerts) {
 
 			switch (action) {
 				case 'reload':
-					socket.emit('admin.logs.get', function (err, logs) {
-						if (!err) {
-							logsEl.text(logs);
-							logsEl.scrollTop(logsEl.prop('scrollHeight'));
-						} else {
-							alerts.error(err);
-						}
-					});
+					loadLogs();
 					break;
 
 				case 'clear':
 					socket.emit('admin.logs.clear', function (err) {
 						if (!err) {
 							alerts.success('[[admin/advanced/logs:clear-success]]');
-							btnEl.prev().click();
+							loadLogs();
 						} else {
 							alerts.error(err);
 						}
@@ -40,5 +31,17 @@ define('admin/advanced/logs', ['alerts'], function (alerts) {
 		});
 	};
 
+	function loadLogs() {
+		const logsEl = $('.logs pre');
+		socket.emit('admin.logs.get', function (err, logs) {
+			if (!err) {
+				logsEl.text(logs);
+				logsEl.scrollTop(logsEl.prop('scrollHeight'));
+			} else {
+				alerts.error(err);
+			}
+		});
+	}
+
 	return Logs;
 });

public/src/admin/appearance/customise.js

@@ -9,7 +9,7 @@ define('admin/appearance/customise', ['admin/settings', 'ace/ace'], function (Se
 			$('#customJS').text($('#customJS-holder').val());
 			$('#customHTML').text($('#customHTML-holder').val());
 
-			initACE('customCSS', 'less', '#customCSS-holder');
+			initACE('customCSS', 'scss', '#customCSS-holder');
 			initACE('customJS', 'javascript', '#customJS-holder');
 			initACE('customHTML', 'html', '#customHTML-holder');
 

public/src/admin/appearance/skins.js

@@ -8,7 +8,7 @@ define('admin/appearance/skins', ['translator', 'alerts'], function (translator,
 		// Populate skins from Bootswatch API
 		$.ajax({
 			method: 'get',
-			url: 'https://bootswatch.com/api/3.json',
+			url: 'https://bootswatch.com/api/5.json',
 		}).done(Skins.render);
 
 		$('#skins').on('click', function (e) {
@@ -69,12 +69,11 @@ define('admin/appearance/skins', ['translator', 'alerts'], function (translator,
 		}, function (html) {
 			themeContainer.html(html);
 
-			if (config['theme:src']) {
-				const skin = config['theme:src']
-					.match(/latest\/(\S+)\/bootstrap.min.css/)[1]
-					.replace(/(^|\s)([a-z])/g, function (m, p1, p2) { return p1 + p2.toUpperCase(); });
-
-				highlightSelectedTheme(skin);
+			if (app.config.bootswatchSkin) {
+				const skin = app.config.bootswatchSkin;
+				highlightSelectedTheme(
+					skin.charAt(0).toUpperCase() + skin.slice(1)
+				);
 			}
 		});
 	};

public/src/admin/dashboard.js

@@ -43,7 +43,9 @@ define('admin/dashboard', [
 
 		isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 
-		$('[data-toggle="tooltip"]').tooltip();
+		$('[data-bs-toggle="tooltip"]').tooltip({
+			animation: false,
+		});
 
 		setupRealtimeButton();
 		setupGraphs(function () {
@@ -64,19 +66,19 @@ define('admin/dashboard', [
 
 		graphData.rooms = data;
 
-		const html = '<div class="text-center pull-left">' +
+		const html = '<div class="text-center float-start">' +
 						'<span class="formatted-number">' + data.onlineRegisteredCount + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.users]]</div>' +
 					'</div>' +
-					'<div class="text-center pull-left">' +
+					'<div class="text-center float-start">' +
 						'<span class="formatted-number">' + data.onlineGuestCount + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.guests]]</div>' +
 					'</div>' +
-					'<div class="text-center pull-left">' +
+					'<div class="text-center float-start">' +
 						'<span class="formatted-number">' + (data.onlineRegisteredCount + data.onlineGuestCount) + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.total]]</div>' +
 					'</div>' +
-					'<div class="text-center pull-left">' +
+					'<div class="text-center float-start">' +
 						'<span class="formatted-number">' + data.socketCount + '</span>' +
 						'<div class="stat">[[admin/dashboard:active-users.connections]]</div>' +
 					'</div>';

public/src/admin/extend/plugins.js

@@ -21,6 +21,10 @@ define('admin/extend/plugins', [
 			return;
 		}
 
+		if (window.location.hash) {
+			$(`.nav-pills button[data-bs-target="${window.location.hash}"]`).trigger('click');
+		}
+
 		const searchInputEl = document.querySelector('#plugin-search');
 		searchInputEl.value = '';
 
@@ -191,7 +195,7 @@ define('admin/extend/plugins', [
 				}
 				let html = '';
 				activePlugins.forEach(function (plugin) {
-					html += '<li class="">' + plugin + '<span class="pull-right"><i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i></span></li>';
+					html += '<li class="">' + plugin + '<span class="float-end"><i class="fa fa-chevron-up"></i><i class="fa fa-chevron-down"></i></span></li>';
 				});
 				if (!activePlugins.length) {
 					translator.translate('[[admin/extend/plugins:none-active]]', function (text) {

public/src/admin/extend/widgets.js

@@ -12,13 +12,13 @@ define('admin/extend/widgets', [
 	const Widgets = {};
 
 	Widgets.init = function () {
-		$('#widgets .nav-pills .dropdown-menu a').on('click', function (ev) {
+		$('#widgets .dropdown .dropdown-menu a').on('click', function (ev) {
 			const $this = $(this);
 			$('#widgets .tab-pane').removeClass('active');
 			const templateName = $this.attr('data-template');
 			$('#widgets .tab-pane[data-template="' + templateName + '"]').addClass('active');
 			$('#widgets .selected-template').text(templateName);
-			$('#widgets .nav-pills .dropdown').trigger('click');
+			$('#widgets .dropdown').trigger('click');
 			ev.preventDefault();
 			return false;
 		});
@@ -73,9 +73,9 @@ define('admin/extend/widgets', [
 					panel.remove();
 				}
 			});
-		}).on('mouseup', '> .panel > .panel-heading', function (evt) {
+		}).on('mouseup', '> .card > .card-header', function (evt) {
 			if (!($(this).parent().is('.ui-sortable-helper') || $(evt.target).closest('.delete-widget').length)) {
-				$(this).parent().children('.panel-body').toggleClass('hidden');
+				$(this).parent().children('.card-body').toggleClass('hidden');
 			}
 		});
 
@@ -176,13 +176,13 @@ define('admin/extend/widgets', [
 					drop: function (event, ui) {
 						const el = $(this);
 
-						el.find('.panel-body .container-html').val(ui.draggable.attr('data-container-html'));
-						el.find('.panel-body').removeClass('hidden');
+						el.find('.card-body .container-html').val(ui.draggable.attr('data-container-html'));
+						el.find('.card-body').removeClass('hidden');
 					},
-					hoverClass: 'panel-info',
+					hoverClass: 'container-hover',
 				})
-				.children('.panel-heading')
-				.append('<div class="pull-right pointer"><span class="delete-widget"><i class="fa fa-times-circle"></i></span></div><div class="pull-left pointer"><span class="toggle-widget"><i class="fa fa-chevron-circle-down"></i></span>&nbsp;</div>')
+				.children('.card-header')
+				.append('<div class="float-end pointer"><span class="delete-widget"><i class="fa fa-times-circle"></i></span></div><div class="float-start pointer"><span class="toggle-widget"><i class="fa fa-chevron-circle-down"></i></span>&nbsp;</div>')
 				.children('small')
 				.html('');
 		}
@@ -191,7 +191,7 @@ define('admin/extend/widgets', [
 	function loadWidgetData() {
 		function populateWidget(widget, data) {
 			if (data.title) {
-				const title = widget.find('.panel-heading strong');
+				const title = widget.find('.card-header strong');
 				title.text(title.text() + ' - ' + data.title);
 			}
 

public/src/admin/manage/categories.js

@@ -51,7 +51,7 @@ define('admin/manage/categories', [
 			const order = $(this).attr('data-order');
 			const modal = bootbox.dialog({
 				title: '[[admin/manage/categories:set-order]]',
-				message: '<input type="number" min="1" class="form-control input-lg" value=' + order + ' /><p class="help-block">[[admin/manage/categories:set-order-help]]</p>',
+				message: '<input type="number" min="1" class="form-control input-lg" value=' + order + ' /><p class="form-text">[[admin/manage/categories:set-order-help]]</p>',
 				show: true,
 				buttons: {
 					save: {
@@ -212,11 +212,17 @@ define('admin/manage/categories', [
 				const oldParentCid = parseInt(e.from.getAttribute('data-cid'), 10);
 				const newParentCid = parseInt(e.to.getAttribute('data-cid'), 10);
 				if (oldParentCid !== newParentCid) {
-					document.querySelector(`.categories li[data-cid="${newParentCid}"] .toggle`).classList.toggle('hide', false);
+					const toggle = document.querySelector(`.categories li[data-cid="${newParentCid}"] .toggle`);
+					if (toggle) {
+						toggle.classList.toggle('hide', false);
+					}
 
 					const children = document.querySelectorAll(`.categories li[data-cid="${oldParentCid}"] ul[data-cid] li[data-cid]`);
 					if (!children.length) {
-						document.querySelector(`.categories li[data-cid="${oldParentCid}"] .toggle`).classList.toggle('hide', true);
+						const toggle = document.querySelector(`.categories li[data-cid="${oldParentCid}"] .toggle`);
+						if (toggle) {
+							toggle.classList.toggle('hide', true);
+						}
 					}
 
 					e.item.dataset.parentCid = newParentCid;
@@ -263,7 +269,11 @@ define('admin/manage/categories', [
 				categories: categories,
 				parentCategory: parentCategory,
 			}, function (html) {
-				container.append(html);
+				if (container.find('.category-row').length) {
+					container.find('.category-row').after(html);
+				} else {
+					container.append(html);
+				}
 
 				// Disable expand toggle
 				if (!categories.length) {

public/src/admin/manage/category.js

@@ -266,6 +266,7 @@ define('admin/manage/category', [
 	function handleTags() {
 		const tagEl = $('#tag-whitelist');
 		tagEl.tagsinput({
+			tagClass: 'badge bg-info',
 			confirmKeys: [13, 44],
 			trimValue: true,
 		});

public/src/admin/manage/privileges.js

@@ -36,7 +36,7 @@ define('admin/manage/privileges', [
 		Privileges.setupPrivilegeTable();
 
 		highlightRow();
-		$('.privilege-filters button:last-child').click();
+		$('.privilege-filters button:first-child').click();
 	};
 
 	Privileges.setupPrivilegeTable = function () {
@@ -133,7 +133,7 @@ define('admin/manage/privileges', [
 			throwConfirmModal('copyToAllGroup', Privileges.copyPrivilegesToAllCategories.bind(null, cid, groupName));
 		});
 
-		$privTableCon.on('click', '.privilege-filters > button', filterPrivileges);
+		$privTableCon.on('click', '.privilege-filters button', filterPrivileges);
 
 		mousetrap.bind('ctrl+s', function (ev) {
 			throwConfirmModal('save', Privileges.commit);
@@ -191,9 +191,7 @@ define('admin/manage/privileges', [
 				$('.privilege-table-container').html(html);
 				Privileges.exposeAssumedPrivileges();
 				document.querySelectorAll('.privilege-filters').forEach((con, i) => {
-					// Three buttons, placed in reverse order
-					const lastIdx = $('.privilege-filters').first().find('button').length - 1;
-					const idx = btnIndices[i] === undefined ? lastIdx : btnIndices[i];
+					const idx = btnIndices[i] === undefined ? 0 : btnIndices[i];
 					con.querySelectorAll('button')[idx].click();
 				});
 

public/src/admin/manage/tags.js

@@ -54,20 +54,27 @@ define('admin/manage/tags', [
 
 	function handleSearch() {
 		$('#tag-search').on('input propertychange', utils.debounce(function () {
-			socket.emit('topics.searchAndLoadTags', {
-				query: $('#tag-search').val(),
-			}, function (err, result) {
-				if (err) {
-					return alerts.error(err);
-				}
-
+			function renderTags(tags) {
 				app.parseAndTranslate('admin/manage/tags', 'tags', {
-					tags: result.tags,
+					tags: tags,
 				}, function (html) {
 					$('.tag-list').html(html);
 					utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
 					selectable.enable('.tag-management', '.tag-row');
 				});
+			}
+			const query = $('#tag-search').val();
+			if (!query) {
+				return renderTags(ajaxify.data.tags);
+			}
+			socket.emit('topics.searchAndLoadTags', {
+				query: query,
+			}, function (err, result) {
+				if (err) {
+					return alerts.error(err);
+				}
+
+				renderTags(result.tags);
 			});
 		}, 250));
 	}

public/src/admin/modules/search.js

@@ -33,7 +33,7 @@ define('admin/modules/search', ['mousetrap', 'alerts'], function (mousetrap, ale
 			);
 
 			return '<li role="presentation" class="result">' +
-				'<a role= "menuitem" href= "' + config.relative_path + '/' + namespace + '" >' +
+				'<a class="dropdown-item" role="menuitem" href= "' + config.relative_path + '/' + namespace + '" >' +
 					title +
 					'<br>' + (!results ? '' :
 				('<small><code>' +

public/src/admin/settings.js

@@ -135,6 +135,7 @@ define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts'], function
 
 	function setupTagsInput() {
 		$('[data-field-type="tagsinput"]').tagsinput({
+			tagClass: 'badge bg-info',
 			confirmKeys: [13, 44],
 			trimValue: true,
 		});

public/src/admin/settings/navigation.js

@@ -55,16 +55,20 @@ define('admin/settings/navigation', [
 
 	function onSelect() {
 		const clickedIndex = $(this).attr('data-index');
-		$('#active-navigation li').removeClass('active');
-		$(this).addClass('active');
+		selectIndex(clickedIndex);
+		return false;
+	}
 
-		const detailsForm = $('#enabled').children('[data-index="' + clickedIndex + '"]');
+	function selectIndex(index) {
+		$('#active-navigation li').removeClass('active');
+		$('#active-navigation [data-index="' + index + '"]').addClass('active');
+
+		const detailsForm = $('#enabled').children('[data-index="' + index + '"]');
 		$('#enabled li').addClass('hidden');
 
 		if (detailsForm.length) {
 			detailsForm.removeClass('hidden');
 		}
-		return false;
 	}
 
 	function drop(ev, ui) {
@@ -80,20 +84,32 @@ define('admin/settings/navigation', [
 		data.title = translator.escape(data.title);
 		data.text = translator.escape(data.text);
 		data.groups = ajaxify.data.groups;
-		Benchpress.parse('admin/settings/navigation', 'navigation', { navigation: [data] }, function (li) {
-			translator.translate(li, function (li) {
-				li = $(translator.unescape(li));
-				el.after(li);
-				el.remove();
+
+		const renderNav = new Promise((resolve) => {
+			Benchpress.parse('admin/settings/navigation', 'navigation', { navigation: [data] }, function (li) {
+				translator.translate(li, function (li) {
+					li = $(translator.unescape(li));
+					el.after(li);
+					el.remove();
+					resolve();
+				});
 			});
 		});
-		Benchpress.parse('admin/settings/navigation', 'enabled', { enabled: [data] }, function (li) {
-			translator.translate(li, function (li) {
-				li = $(translator.unescape(li));
-				$('#enabled').append(li);
-				componentHandler.upgradeDom();
+		const renderForm = new Promise((resolve) => {
+			Benchpress.parse('admin/settings/navigation', 'enabled', { enabled: [data] }, function (li) {
+				translator.translate(li, function (li) {
+					li = $(translator.unescape(li));
+					$('#enabled').append(li);
+					componentHandler.upgradeDom();
+					resolve();
+				});
 			});
 		});
+
+		Promise.all([
+			renderNav,
+			renderForm,
+		]).then(() => selectIndex(data.index));
 	}
 
 	function save() {

public/src/app.js

@@ -150,41 +150,6 @@ if (document.readyState === 'loading') {
 		return single ? result.pop() : result;
 	}
 
-	app.logout = function (redirect) {
-		console.warn('[deprecated] app.logout is deprecated, please use logout module directly');
-		require(['logout'], function (logout) {
-			logout(redirect);
-		});
-	};
-
-	app.alert = function (params) {
-		console.warn('[deprecated] app.alert is deprecated, please use alerts.alert');
-		require(['alerts'], function (alerts) {
-			alerts.alert(params);
-		});
-	};
-
-	app.removeAlert = function (id) {
-		console.warn('[deprecated] app.removeAlert is deprecated, please use alerts.remove');
-		require(['alerts'], function (alerts) {
-			alerts.remove(id);
-		});
-	};
-
-	app.alertSuccess = function (message, timeout) {
-		console.warn('[deprecated] app.alertSuccess is deprecated, please use alerts.success');
-		require(['alerts'], function (alerts) {
-			alerts.success(message, timeout);
-		});
-	};
-
-	app.alertError = function (message, timeout) {
-		console.warn('[deprecated] app.alertError is deprecated, please use alerts.error');
-		require(['alerts'], function (alerts) {
-			alerts.error(message, timeout);
-		});
-	};
-
 	app.enterRoom = function (room, callback) {
 		callback = callback || function () { };
 		if (socket && app.user.uid && app.currentRoom !== room) {
@@ -224,8 +189,8 @@ if (document.readyState === 'loading') {
 
 	function highlightNavigationLink() {
 		$('#main-nav li')
-			.removeClass('active')
 			.find('a')
+			.removeClass('active')
 			.filter(function (i, a) {
 				return $(a).attr('href') !== '#' && window.location.hostname === a.hostname &&
 					(
@@ -233,26 +198,19 @@ if (document.readyState === 'loading') {
 						window.location.pathname.startsWith(a.pathname + '/')
 					);
 			})
-			.parent()
 			.addClass('active');
 	}
 
 	app.createUserTooltips = function (els, placement) {
-		if (isTouchDevice) {
-			return;
-		}
-		els = els || $('body');
-		els.find('.avatar,img[title].teaser-pic,img[title].user-img,div.user-icon,span.user-icon').one('mouseenter', function (ev) {
-			const $this = $(this);
-			// perf: create tooltips on demand
-			$this.tooltip({
-				placement: placement || $this.attr('title-placement') || 'top',
-				title: $this.attr('title'),
+		if (!isTouchDevice) {
+			els = els || $('body');
+			els.tooltip({
+				selector: '.avatar',
+				placement: placement || 'top',
 				container: '#content',
+				animation: false,
 			});
-			// this will cause the tooltip to show up
-			$this.trigger(ev);
-		});
+		}
 	};
 
 	app.createStatusTooltips = function () {
@@ -260,6 +218,18 @@ if (document.readyState === 'loading') {
 			$('body').tooltip({
 				selector: '.fa-circle.status',
 				placement: 'top',
+				container: '#content',
+				animation: false,
+			});
+
+			$('#content').on('inserted.bs.tooltip', function (ev) {
+				const target = $(ev.target);
+				if (target.attr('component') === 'user/status') {
+					const newTitle = target.attr('data-new-title');
+					if (newTitle) {
+						$('.tooltip .tooltip-inner').text(newTitle);
+					}
+				}
 			});
 		}
 	};
@@ -274,20 +244,6 @@ if (document.readyState === 'loading') {
 		app.createStatusTooltips();
 	};
 
-	app.openChat = function (roomId, uid) {
-		console.warn('[deprecated] app.openChat is deprecated, please use chat.openChat');
-		require(['chat'], function (chat) {
-			chat.openChat(roomId, uid);
-		});
-	};
-
-	app.newChat = function (touid, callback) {
-		console.warn('[deprecated] app.newChat is deprecated, please use chat.newChat');
-		require(['chat'], function (chat) {
-			chat.newChat(touid, callback);
-		});
-	};
-
 	app.toggleNavbar = function (state) {
 		require(['components'], (components) => {
 			const navbarEl = components.get('navbar');
@@ -295,28 +251,6 @@ if (document.readyState === 'loading') {
 		});
 	};
 
-	app.enableTopicSearch = function (options) {
-		console.warn('[deprecated] app.enableTopicSearch is deprecated, please use search.enableQuickSearch(options)');
-		require(['search'], function (search) {
-			search.enableQuickSearch(options);
-		});
-	};
-
-	app.handleSearch = function (searchOptions) {
-		console.warn('[deprecated] app.handleSearch is deprecated, please use search.init(options)');
-		require(['search'], function (search) {
-			search.init(searchOptions);
-		});
-	};
-
-	app.prepareSearch = function () {
-		console.warn('[deprecated] app.prepareSearch is deprecated, please use search.showAndFocusInput()');
-		require(['search'], function (search) {
-			search.showAndFocusInput();
-		});
-	};
-
-
 	app.updateUserStatus = function (el, status) {
 		if (!el.length) {
 			return;
@@ -326,8 +260,7 @@ if (document.readyState === 'loading') {
 			translator.translate('[[global:' + status + ']]', function (translated) {
 				el.removeClass('online offline dnd away')
 					.addClass(status)
-					.attr('title', translated)
-					.attr('data-original-title', translated);
+					.attr('data-new-title', translated)
 			});
 		});
 	};

public/src/client/account/best.js

@@ -7,7 +7,7 @@ define('forum/account/best', ['forum/account/header', 'forum/account/posts'], fu
 	Best.init = function () {
 		header.init();
 
-		$('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
+		$('[component="post/content"] img:not(.not-responsive)').addClass('img-fluid');
 
 		posts.handleInfiniteScroll('account/best');
 	};

public/src/client/account/blocks.js

@@ -53,6 +53,7 @@ define('forum/account/blocks', [
 		$.get(config.relative_path + '/api/' + ajaxify.currentPage)
 			.done(function (payload) {
 				app.parseAndTranslate('account/blocks', 'users', payload, function (html) {
+					html.find('.timeago').timeago();
 					$('#users-container').html(html);
 					$('#users-container').siblings('div.alert')[html.length ? 'hide' : 'show']();
 				});

public/src/client/account/bookmarks.js

@@ -7,7 +7,7 @@ define('forum/account/bookmarks', ['forum/account/header', 'forum/account/posts'
 	Bookmarks.init = function () {
 		header.init();
 
-		$('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
+		$('[component="post/content"] img:not(.not-responsive)').addClass('img-fluid');
 
 		posts.handleInfiniteScroll('account/bookmarks');
 	};

public/src/client/account/downvoted.js

@@ -7,7 +7,7 @@ define('forum/account/downvoted', ['forum/account/header', 'forum/account/posts'
 	Downvoted.init = function () {
 		header.init();
 
-		$('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
+		$('[component="post/content"] img:not(.not-responsive)').addClass('img-fluid');
 
 		posts.handleInfiniteScroll('account/downvoted');
 	};

public/src/client/account/posts.js

@@ -10,7 +10,7 @@ define('forum/account/posts', ['forum/account/header', 'forum/infinitescroll', '
 	AccountPosts.init = function () {
 		header.init();
 
-		$('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
+		$('[component="post/content"] img:not(.not-responsive)').addClass('img-fluid');
 
 		AccountPosts.handleInfiniteScroll('account/posts');
 	};
@@ -43,9 +43,8 @@ define('forum/account/posts', ['forum/account/header', 'forum/infinitescroll', '
 	function onPostsLoaded(posts, callback) {
 		app.parseAndTranslate(template, 'posts', { posts: posts }, function (html) {
 			$('[component="posts"]').append(html);
-			html.find('img:not(.not-responsive)').addClass('img-responsive');
+			html.find('img:not(.not-responsive)').addClass('img-fluid');
 			html.find('.timeago').timeago();
-			app.createUserTooltips(html);
 			utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
 			hooks.fire('action:posts.loaded', { posts: posts });
 			callback();

public/src/client/account/profile.js

@@ -23,7 +23,7 @@ define('forum/account/profile', [
 	};
 
 	function processPage() {
-		$('[component="posts"] [component="post/content"] img:not(.not-responsive), [component="aboutme"] img:not(.not-responsive)').addClass('img-responsive');
+		$('[component="posts"] [component="post/content"] img:not(.not-responsive), [component="aboutme"] img:not(.not-responsive)').addClass('img-fluid');
 	}
 
 	function onUserStatusChange(data) {

public/src/client/account/settings.js

@@ -2,8 +2,8 @@
 
 
 define('forum/account/settings', [
-	'forum/account/header', 'components', 'translator', 'api', 'alerts',
-], function (header, components, translator, api, alerts) {
+	'forum/account/header', 'components', 'api', 'alerts', 'hooks',
+], function (header, components, api, alerts, hooks) {
 	const AccountSettings = {};
 
 	// If page skin is changed but not saved, switch the skin back
@@ -83,16 +83,7 @@ define('forum/account/settings', [
 			}
 
 			if (languageChanged && parseInt(app.user.uid, 10) === parseInt(ajaxify.data.theirid, 10)) {
-				translator.translate('[[language:dir]]', config.userLang, function (translated) {
-					const htmlEl = $('html');
-					htmlEl.attr('data-dir', translated);
-					htmlEl.css('direction', translated);
-				});
-
-				translator.switchTimeagoLanguage(utils.userLangToTimeagoCode(config.userLang), function () {
-					overrides.overrideTimeago();
-					ajaxify.refresh();
-				});
+				window.location.reload();
 			}
 		});
 	}
@@ -125,23 +116,36 @@ define('forum/account/settings', [
 
 		// Stop execution if skin didn't change
 		if (skinName === currentSkin) {
+			hooks.fire('action:skin.change', { skin: skinName, currentSkin });
 			return;
 		}
-
+		const langDir = $('html').attr('data-dir');
 		const linkEl = document.createElement('link');
 		linkEl.rel = 'stylesheet';
 		linkEl.type = 'text/css';
-		linkEl.href = config.relative_path + '/assets/client' + (skinName ? '-' + skinName : '') + '.css';
+		linkEl.href = config.relative_path +
+			'/assets/client' + (skinName ? '-' + skinName : '') +
+			(langDir === 'rtl' ? '-rtl' : '') +
+			'.css';
 		linkEl.onload = function () {
 			clientEl.parentNode.removeChild(clientEl);
 
 			// Update body class with proper skin name
 			$('body').removeClass(currentSkinClassName.join(' '));
 			$('body').addClass('skin-' + (skinName || 'noskin'));
+			hooks.fire('action:skin.change', { skin: skinName, currentSkin });
 		};
 
 		document.head.appendChild(linkEl);
 	}
 
+	AccountSettings.changeSkin = async function (skin) {
+		if (app.user.uid) {
+			await api.put(`/users/${app.user.uid}/settings`, { settings: { bootswatchSkin: skin } });
+		}
+		config.bootswatchSkin = skin;
+		reskin(skin);
+	};
+
 	return AccountSettings;
 });

public/src/client/account/topics.js

@@ -46,7 +46,6 @@ define('forum/account/topics', [
 		app.parseAndTranslate(template, 'topics', { topics: topics }, function (html) {
 			$('[component="category"]').append(html);
 			html.find('.timeago').timeago();
-			app.createUserTooltips(html);
 			utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
 			hooks.fire('action:topics.loaded', { topics: topics });
 			callback();

public/src/client/account/upvoted.js

@@ -7,7 +7,7 @@ define('forum/account/upvoted', ['forum/account/header', 'forum/account/posts'],
 	Upvoted.init = function () {
 		header.init();
 
-		$('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
+		$('[component="post/content"] img:not(.not-responsive)').addClass('img-fluid');
 
 		posts.handleInfiniteScroll('account/upvoted');
 	};

public/src/client/categories.js

@@ -24,6 +24,7 @@ define('forum/categories', ['components', 'categorySelector', 'hooks'], function
 
 		$('.category-header').tooltip({
 			placement: 'bottom',
+			animation: false,
 		});
 	};
 
@@ -46,7 +47,7 @@ define('forum/categories', ['components', 'categorySelector', 'hooks'], function
 		const recentPosts = category.find('[component="category/posts"]');
 
 		app.parseAndTranslate('partials/categories/lastpost', 'posts', { posts: [post] }, function (html) {
-			html.find('.post-content img:not(.not-responsive)').addClass('img-responsive');
+			html.find('.post-content img:not(.not-responsive)').addClass('img-fluid');
 			html.hide();
 			if (recentPosts.length === 0) {
 				html.appendTo(category);
@@ -56,7 +57,6 @@ define('forum/categories', ['components', 'categorySelector', 'hooks'], function
 
 			html.fadeIn();
 
-			app.createUserTooltips(html);
 			html.find('.timeago').timeago();
 
 			if (category.find('[component="category/posts"]').length > parseInt(numRecentReplies, 10)) {

public/src/client/category.js

@@ -105,7 +105,6 @@ define('forum/category', [
 					html.find('.timeago').timeago();
 					$('[component="category/subcategory/container"]').append(html);
 					utils.makeNumbersHumanReadable(html.find('.human-readable-number'));
-					app.createUserTooltips(html);
 					ajaxify.data.nextSubCategoryStart += ajaxify.data.subCategoriesPerPage;
 					ajaxify.data.subCategoriesLeft -= data.length;
 					btn.toggleClass('hidden', ajaxify.data.subCategoriesLeft <= 0)

public/src/client/chats.js

@@ -166,7 +166,7 @@ define('forum/chats', [
 					html = $(html);
 					el.prepend(html);
 					html.find('.timeago').timeago();
-					html.find('img:not(.not-responsive)').addClass('img-responsive');
+					html.find('img:not(.not-responsive)').addClass('img-fluid');
 					el.scrollTop((el[0].scrollHeight - previousHeight) + currentScrollTop);
 					loading = false;
 				});
@@ -247,7 +247,7 @@ define('forum/chats', [
 		let modal;
 
 		buttonEl.on('click', function () {
-			app.parseAndTranslate('partials/modals/manage_room', {}, function (html) {
+			app.parseAndTranslate('modals/manage-room', {}, function (html) {
 				modal = bootbox.dialog({
 					title: '[[modules:chat.manage-room]]',
 					message: html,
@@ -294,7 +294,7 @@ define('forum/chats', [
 			bootbox.confirm({
 				size: 'small',
 				title: '[[modules:chat.leave]]',
-				message: '<p>[[modules:chat.leave-prompt]]</p><p class="help-block">[[modules:chat.leave-help]]</p>',
+				message: '<p>[[modules:chat.leave-prompt]]</p><p class="form-text">[[modules:chat.leave-help]]</p>',
 				callback: function (ok) {
 					if (ok) {
 						api.delete(`/chats/${roomId}/users/${app.user.uid}`, {}).then(() => {
@@ -325,7 +325,7 @@ define('forum/chats', [
 			}
 		}
 
-		app.parseAndTranslate('partials/modals/manage_room_users', data, function (html) {
+		app.parseAndTranslate('partials/chats/manage-room-users', data, function (html) {
 			listEl.html(html);
 		});
 	};
@@ -334,7 +334,7 @@ define('forum/chats', [
 		let modal;
 
 		buttonEl.on('click', function () {
-			app.parseAndTranslate('partials/modals/rename_room', {
+			app.parseAndTranslate('modals/rename-room', {
 				name: roomName || ajaxify.data.roomName,
 			}, function (html) {
 				modal = bootbox.dialog({

public/src/client/chats/messages.js

@@ -76,7 +76,7 @@ define('forum/chats/messages', [
 		const isAtBottom = messages.isAtBottom(chatContentEl);
 		newMessage.appendTo(chatContentEl);
 		newMessage.find('.timeago').timeago();
-		newMessage.find('img:not(.not-responsive)').addClass('img-responsive');
+		newMessage.find('img:not(.not-responsive)').addClass('img-fluid');
 		if (isAtBottom) {
 			messages.scrollToBottom(chatContentEl);
 		}

public/src/client/chats/search.js

@@ -1,7 +1,9 @@
 'use strict';
 
 
-define('forum/chats/search', ['components', 'api', 'alerts'], function (components, api, alerts) {
+define('forum/chats/search', [
+	'components', 'api', 'alerts', 'helpers',
+], function (components, api, alerts, helpers) {
 	const search = {};
 
 	search.init = function () {
@@ -11,7 +13,7 @@ define('forum/chats/search', ['components', 'api', 'alerts'], function (componen
 	function doSearch() {
 		const username = components.get('chat/search').val();
 		if (!username) {
-			return $('[component="chat/search/list"]').empty();
+			return $('[component="chat/search/list"]').translateHtml('<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>');
 		}
 
 		api.get('/api/users', {
@@ -31,7 +33,7 @@ define('forum/chats/search', ['components', 'api', 'alerts'], function (componen
 		});
 
 		if (!data.users.length) {
-			return chatsListEl.translateHtml('<li><div><span>[[users:no-users-found]]</span></div></li>');
+			return chatsListEl.translateHtml('<li><a href="#" class="dropdown-item">[[users:no-users-found]]</a></li>');
 		}
 
 		data.users.forEach(function (userObj) {
@@ -44,10 +46,8 @@ define('forum/chats/search', ['components', 'api', 'alerts'], function (componen
 
 	function displayUser(chatsListEl, userObj) {
 		function createUserImage() {
-			return (userObj.picture ?
-				'<img src="' + userObj.picture + '" title="' + userObj.username + '" />' :
-				'<div class="user-icon" style="background-color: ' + userObj['icon:bgColor'] + '">' + userObj['icon:text'] + '</div>') +
-				'<i class="fa fa-circle status ' + userObj.status + '"></i> ' + userObj.username;
+			const img = helpers.buildAvatar(userObj, '24px', true);
+			return `<a href="#" class="dropdown-item">${img} ${userObj.username}<a>`;
 		}
 
 		const chatEl = $('<li component="chat/search/user"></li>')

public/src/client/groups/details.js

@@ -67,7 +67,7 @@ define('forum/groups/details', [
 
 		handleMemberInvitations();
 
-		components.get('groups/activity').find('.content img:not(.not-responsive)').addClass('img-responsive');
+		components.get('groups/activity').find('.content img:not(.not-responsive)').addClass('img-fluid');
 
 		detailsPage.on('click', '[data-action]', function () {
 			const btnEl = $(this);
@@ -141,8 +141,8 @@ define('forum/groups/details', [
 		const labelColorValueEl = settingsFormEl.find('[name="labelColor"]');
 		const textColorValueEl = settingsFormEl.find('[name="textColor"]');
 		const iconBtn = settingsFormEl.find('[data-action="icon-select"]');
-		const previewEl = settingsFormEl.find('.label');
-		const previewElText = settingsFormEl.find('.label-text');
+		const previewEl = settingsFormEl.find('.badge');
+		const previewElText = settingsFormEl.find('.badge-text');
 		const previewIcon = previewEl.find('i');
 		const userTitleEl = settingsFormEl.find('[name="userTitle"]');
 		const userTitleEnabledEl = settingsFormEl.find('[name="userTitleEnabled"]');

public/src/client/header.js

@@ -43,31 +43,18 @@ define('forum/header', [
 		if (env === 'xs' || env === 'sm' || utils.isTouchDevice()) {
 			return;
 		}
-		$('#header-menu li a[title]').each(function () {
-			$(this).tooltip({
-				placement: 'bottom',
-				trigger: 'hover',
-				title: $(this).attr('title'),
-			});
-		});
 
-
-		$('#search-form').tooltip({
+		$('#header-menu #main-nav').tooltip({
+			selector: '.nav-item',
 			placement: 'bottom',
 			trigger: 'hover',
-			title: $('#search-button i').attr('title'),
-		});
-
-
-		$('#user_dropdown').tooltip({
-			placement: 'bottom',
-			trigger: 'hover',
-			title: $('#user_dropdown').attr('title'),
+			container: 'body',
+			animation: false,
 		});
 	}
 
 	function handleLogout() {
-		$('#header-menu .container').on('click', '[component="user/logout"]', function () {
+		$('body').on('click', '[component="user/logout"]', function () {
 			require(['logout'], function (logout) {
 				logout();
 			});

public/src/client/header/chat.js

@@ -1,6 +1,6 @@
 'use strict';
 
-define('forum/header/chat', ['components'], function (components) {
+define('forum/header/chat', ['components', 'hooks'], function (components, hooks) {
 	const chat = {};
 
 	chat.prepareDOM = function () {
@@ -31,6 +31,7 @@ define('forum/header/chat', ['components'], function (components) {
 			components.get('chat/icon')
 				.toggleClass('unread-count', count > 0)
 				.attr('data-content', count > 99 ? '99+' : count);
+			hooks.fire('action:chat.updateCount', { count });
 		});
 	};
 

public/src/client/header/unread.js

@@ -1,6 +1,6 @@
 'use strict';
 
-define('forum/header/unread', function () {
+define('forum/header/unread', ['hooks'], function (hooks) {
 	const unread = {};
 	const watchStates = {
 		ignoring: 1,
@@ -89,6 +89,8 @@ define('forum/header/unread', function () {
 			.attr('data-content', count > 99 ? '99+' : count);
 
 		$('#mobile-menu [data-unread-url="' + url + '"]').attr('data-content', count > 99 ? '99+' : count);
+
+		hooks.fire('action:unread.updateCount', { url, count });
 	}
 	unread.updateUnreadTopicCount = updateUnreadTopicCount;
 

public/src/client/post-queue.js

@@ -7,7 +7,7 @@ define('forum/post-queue', [
 	const PostQueue = {};
 
 	PostQueue.init = function () {
-		$('[data-toggle="tooltip"]').tooltip();
+		$('[data-bs-toggle="tooltip"]').tooltip();
 
 		categoryFilter.init($('[component="category/dropdown"]'), {
 			privilege: 'moderate',
@@ -101,7 +101,7 @@ define('forum/post-queue', [
 			return false;
 		});
 
-		$('[component="post/content"] img:not(.not-responsive)').addClass('img-responsive');
+		$('[component="post/content"] img:not(.not-responsive)').addClass('img-fluid');
 	};
 
 	function confirmReject(msg) {

public/src/client/search.js

@@ -160,6 +160,7 @@ define('forum/search', [
 	function enableAutoComplete() {
 		const userEl = $('#posted-by-user');
 		userEl.tagsinput({
+			tagClass: 'badge bg-info',
 			confirmKeys: [13, 44],
 			trimValue: true,
 		});
@@ -169,6 +170,7 @@ define('forum/search', [
 
 		const tagEl = $('#has-tags');
 		tagEl.tagsinput({
+			tagClass: 'badge bg-info',
 			confirmKeys: [13, 44],
 			trimValue: true,
 		});

public/src/client/topic.js

@@ -78,7 +78,7 @@ define('forum/topic', [
 				require(['search'], function (search) {
 					mousetrap.bind(['command+f', 'ctrl+f'], function (e) {
 						e.preventDefault();
-						$('#search-fields input').val('in:topic-' + ajaxify.data.tid + ' ');
+						$('[component="search/fields"] input[name="query"]').val('in:topic-' + ajaxify.data.tid + ' ');
 						search.showAndFocusInput();
 					});
 

public/src/client/topic/change-owner.js

@@ -15,14 +15,14 @@ define('forum/topic/change-owner', [
 		if (modal) {
 			return;
 		}
-		app.parseAndTranslate('partials/change_owner_modal', {}, function (html) {
+		app.parseAndTranslate('modals/change-owner', {}, function (html) {
 			modal = html;
 
 			commit = modal.find('#change_owner_commit');
 
 			$('body').append(modal);
 
-			modal.find('.close,#change_owner_cancel').on('click', closeModal);
+			modal.find('#change_owner_cancel').on('click', closeModal);
 			modal.find('#username').on('keyup', checkButtonEnable);
 			postSelect.init(onPostToggled, {
 				allowMainPostSelect: true,

public/src/client/topic/delete-posts.js

@@ -18,7 +18,7 @@ define('forum/topic/delete-posts', [
 			return;
 		}
 
-		app.parseAndTranslate('partials/delete_posts_modal', {}, function (html) {
+		app.parseAndTranslate('modals/delete-posts', {}, function (html) {
 			modal = html;
 
 			$('body').append(modal);
@@ -26,7 +26,7 @@ define('forum/topic/delete-posts', [
 			deleteBtn = modal.find('#delete_posts_confirm');
 			purgeBtn = modal.find('#purge_posts_confirm');
 
-			modal.find('.close,#delete_posts_cancel').on('click', closeModal);
+			modal.find('#delete_posts_cancel').on('click', closeModal);
 
 			postSelect.init(function () {
 				checkButtonEnable();

public/src/client/topic/diffs.js

@@ -109,7 +109,7 @@ define('forum/topic/diffs', ['api', 'bootbox', 'alerts', 'forum/topic/images'],
 				params.unshift(blockName);
 			}
 
-			app.parseAndTranslate('partials/modals/post_history', ...params);
+			app.parseAndTranslate('modals/post-history', ...params);
 		});
 	}