chore: alpha 3

so themes can use whatever they want for the user list menu

.eslintignore

@@ -18,12 +18,3 @@ logs/
 .eslintrc
 test/files
 *.min.js
-
-/public/src/app.js
-/public/src/client.js
-/public/src/admin/admin.js
-/public/src/modules/translator.common.js
-/public/src/modules/pictureCropper.js
-/public/src/modules/ace-editor.js
-/public/src/client/account/header.js
-/public/src/client/test.js

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',
@@ -167,16 +153,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'];
@@ -184,7 +168,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/data/footer.json

@@ -2,7 +2,7 @@
 	{
 		"widget": "html",
 		"data" : {
-			"html": "<footer id=\"footer\" class=\"container footer\">\r\n\t<div>\r\n\t\tPowered by <a target=\"_blank\" href=\"https://nodebb.org\">NodeBB</a> | <a target=\"_blank\" href=\"//github.com/NodeBB/NodeBB/graphs/contributors\">Contributors</a>\r\n\t</div>\r\n</footer>",
+			"html": "<footer id=\"footer\" class=\"container footer d-flex flex-column align-items-center gap-1 mb-2\">\n\t<span>Powered by <a class=\"link-secondary text-decoration-underline\" target=\"_blank\" href=\"https://nodebb.org\">NodeBB</a></span>\n\t<span><a class=\"link-secondary\" target=\"_blank\" href=\"//github.com/NodeBB/NodeBB/graphs/contributors\"><i class=\"fa fa-users\"></i> <span class=\"text-decoration-underline\">Contributors<span></a></span>\n</footer>",
 			"title":"",
 			"container":""
 		}

install/data/navigation.json

@@ -4,7 +4,7 @@
 		"title": "[[global:header.categories]]",
 		"enabled": true,
 		"iconClass": "fa-list",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.categories]]"
 	},
 	{
@@ -13,7 +13,7 @@
 		"title": "[[global:header.unread]]",
 		"enabled": true,
 		"iconClass": "fa-inbox",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.unread]]",
 		"groups": ["registered-users"]
 	},
@@ -22,7 +22,7 @@
 		"title": "[[global:header.recent]]",
 		"enabled": true,
 		"iconClass": "fa-clock-o",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.recent]]"
 	},
 	{
@@ -30,7 +30,7 @@
 		"title": "[[global:header.tags]]",
 		"enabled": true,
 		"iconClass": "fa-tags",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.tags]]"
 	},
 	{
@@ -38,7 +38,7 @@
 		"title": "[[global:header.popular]]",
 		"enabled": true,
 		"iconClass": "fa-fire",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.popular]]"
 	},
 	{
@@ -46,7 +46,7 @@
 		"title": "[[global:header.users]]",
 		"enabled": true,
 		"iconClass": "fa-user",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.users]]"
 	},
 	{
@@ -54,7 +54,7 @@
 		"title": "[[global:header.groups]]",
 		"enabled": true,
 		"iconClass": "fa-group",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.groups]]"
 	},
 	{
@@ -62,7 +62,7 @@
 		"title": "[[global:header.admin]]",
 		"enabled": true,
 		"iconClass": "fa-cogs",
-		"textClass": "visible-xs-inline",
+		"textClass": "d-lg-none",
 		"text": "[[global:header.admin]]",
 		"groups": ["administrators"]
 	}

install/package.json

@@ -2,8 +2,8 @@
     "name": "nodebb",
     "license": "GPL-3.0",
     "description": "NodeBB Forum",
-    "version": "2.8.0",
-    "homepage": "http://www.nodebb.org",
+    "version": "3.0.0-alpha.3",
+    "homepage": "https://www.nodebb.org",
     "repository": {
         "type": "git",
         "url": "https://github.com/NodeBB/NodeBB/"
@@ -30,6 +30,7 @@
     "dependencies": {
         "@adactive/bootstrap-tagsinput": "0.8.2",
         "@isaacs/ttlcache": "1.2.1",
+        "@popperjs/core": "2.11.6",
         "ace-builds": "1.14.0",
         "archiver": "5.3.1",
         "async": "3.2.4",
@@ -37,8 +38,9 @@
         "bcryptjs": "2.4.3",
         "benchpressjs": "2.4.3",
         "body-parser": "1.20.1",
-        "bootbox": "5.5.3",
-        "bootstrap": "3.4.1",
+        "bootbox": "6.0.0",
+        "bootstrap": "5.2.3",
+        "bootswatch": "5.2.2",
         "chalk": "4.1.2",
         "chart.js": "2.9.4",
         "cli-graph": "3.2.2",
@@ -87,22 +89,20 @@
         "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.2",
-        "nodebb-plugin-composer-default": "9.2.4",
-        "nodebb-plugin-dbsearch": "5.1.5",
-        "nodebb-plugin-emoji": "4.0.6",
-        "nodebb-plugin-emoji-android": "3.0.0",
-        "nodebb-plugin-markdown": "10.1.1",
-        "nodebb-plugin-mentions": "3.0.12",
-        "nodebb-plugin-spam-be-gone": "1.0.2",
+        "nodebb-plugin-2factor": "6.0.3",
+        "nodebb-plugin-composer-default": "10.0.17",
+        "nodebb-plugin-dbsearch": "6.0.0",
+        "nodebb-plugin-emoji": "5.0.3",
+        "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.4",
         "nodebb-rewards-essentials": "0.2.1",
-        "nodebb-theme-lavender": "6.0.1",
-        "nodebb-theme-persona": "12.1.12",
-        "nodebb-theme-slick": "2.0.2",
-        "nodebb-theme-vanilla": "12.1.19",
-        "nodebb-widget-essentials": "6.0.1",
+        "nodebb-theme-lavender": "7.0.3",
+        "nodebb-theme-peace": "2.0.12",
+        "nodebb-theme-persona": "13.0.33",
+        "nodebb-widget-essentials": "7.0.2",
         "nodemailer": "6.8.0",
         "nprogress": "0.2.0",
         "passport": "0.6.0",
@@ -119,7 +119,9 @@
         "request-promise-native": "1.0.9",
         "rimraf": "3.0.2",
         "rss": "1.2.2",
+        "rtlcss": "4.0.0",
         "sanitize-html": "2.8.1",
+        "sass": "1.54.9",
         "semver": "7.3.8",
         "serve-favicon": "2.5.0",
         "sharp": "0.31.3",
@@ -137,7 +139,6 @@
         "timeago": "1.6.7",
         "tinycon": "0.6.8",
         "toobusy-js": "0.5.1",
-        "uglify-es": "3.3.9",
         "validator": "13.7.0",
         "webpack": "5.75.0",
         "webpack-merge": "5.8.0",
@@ -166,6 +167,9 @@
         "nyc": "15.1.0",
         "smtp-server": "3.11.0"
     },
+    "optionalDependencies": {
+        "sass-embedded": "1.55.0"
+    },
     "resolutions": {
         "*/jquery": "3.6.3"
     },
@@ -176,11 +180,6 @@
         "node": ">=12"
     },
     "maintainers": [
-        {
-            "name": "Andrew Rodrigues",
-            "email": "andrew@nodebb.org",
-            "url": "https://github.com/psychobunny"
-        },
         {
             "name": "Julian Lam",
             "email": "julian@nodebb.org",
@@ -192,4 +191,4 @@
             "url": "https://github.com/barisusakli"
         }
     ]
-}
+}

install/web.js

@@ -6,7 +6,6 @@ const bodyParser = require('body-parser');
 const fs = require('fs');
 const path = require('path');
 const childProcess = require('child_process');
-const less = require('less');
 
 const webpack = require('webpack');
 const nconf = require('nconf');
@@ -14,6 +13,7 @@ const nconf = require('nconf');
 const Benchpress = require('benchpressjs');
 const mkdirp = require('mkdirp');
 const { paths } = require('../src/constants');
+const sass = require('../src/utils').getSass();
 
 const app = express();
 let server;
@@ -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/admin.json

@@ -4,8 +4,6 @@
 
 	"acp-title": "%1 | NodeBB Admin Control Panel",
 	"settings-header-contents": "Contents",
-	"changes-saved": "Changes Saved",
-	"changes-saved-message": "Your changes to the NodeBB configuration have been saved.",
 	"changes-not-saved": "Changes Not Saved",
 	"changes-not-saved-message": "NodeBB encountered a problem saving your changes. (%1)"
 }

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/manage/groups.json

@@ -39,6 +39,5 @@
 	"revert": "Revert",
 
 	"edit.no-users-found": "No Users Found",
-	"edit.confirm-remove-user": "Are you sure you want to remove this user?",
-	"edit.save-success": "Changes saved!"
+	"edit.confirm-remove-user": "Are you sure you want to remove this user?"
 }

public/language/en-GB/admin/manage/privileges.json

@@ -49,7 +49,6 @@
 	"alert.confirm-moderate": "<strong>Are you sure you wish to grant the moderation privilege to this user group?</strong> This group is public, and any users can join at will.",
 	"alert.confirm-admins-mods": "<strong>Are you sure you wish to grant the &quot;Admins &amp; Mods&quot; privilege to this user/group?</strong> Users with this privilege are able to promote and demote other users into privileged positions, <em>including super administrator</em>",
 	"alert.confirm-save": "Please confirm your intention to save these privileges",
-	"alert.saved": "Privilege changes saved and applied",
 	"alert.confirm-discard": "Are you sure you wish to discard your privilege changes?",
 	"alert.discarded": "Privilege changes discarded",
 	"alert.confirm-copyToAll": "Are you sure you wish to apply this set of <strong>%1</strong> to <strong>all categories</strong>?",

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/error.json

@@ -258,5 +258,6 @@
 	"api.429": "You have made too many requests, please try again later",
 	"api.500": "An unexpected error was encountered while attempting to service your request.",
 	"api.501": "The route you are trying to call is not implemented yet, please try again tomorrow",
-	"api.503": "The route you are trying to call is not currently available due to a server configuration"
+	"api.503": "The route you are trying to call is not currently available due to a server configuration",
+	"api.reauth-required": "The resource you are trying to access requires (re-)authentication."
 }

public/language/en-GB/global.json

@@ -43,10 +43,14 @@
 	"header.notifications": "Notifications",
 	"header.search": "Search",
 	"header.profile": "Profile",
+	"header.account": "Account",
 	"header.navigation": "Navigation",
+	"header.manage": "Manage",
+	"header.drafts": "Drafts",
 
 	"notifications.loading": "Loading Notifications",
 	"chats.loading": "Loading Chats",
+	"drafts.loading": "Loading Drafts",
 
 	"motd.welcome": "Welcome to NodeBB, the discussion platform of the future.",
 
@@ -83,6 +87,7 @@
 	"reputation": "Reputation",
 	"lastpost": "Last post",
 	"firstpost": "First post",
+	"about": "About",
 
 	"read_more": "read more",
 	"more": "More",
@@ -108,6 +113,7 @@
 
 	"moderator_tools": "Moderator Tools",
 
+	"status": "Status",
 	"online": "Online",
 	"away": "Away",
 	"dnd": "Do not disturb",
@@ -151,5 +157,6 @@
 	"disabled": "Disabled",
 	"select": "Select",
 
-	"user-search-prompt": "Type something here to find users..."
+	"user-search-prompt": "Type something here to find users...",
+	"hidden": "Hidden"
 }

public/language/en-GB/modules.json

@@ -44,6 +44,7 @@
 	"composer.compose": "Compose",
 	"composer.show_preview": "Show Preview",
 	"composer.hide_preview": "Hide Preview",
+	"composer.help": "Help",
 	"composer.user_said_in": "%1 said in %2:",
 	"composer.user_said": "%1 said:",
 	"composer.discard": "Are you sure you wish to discard this post?",
@@ -67,7 +68,8 @@
 	"composer.schedule-time": "Time",
 	"composer.cancel-scheduling": "Cancel Scheduling",
 	"composer.set-schedule-date": "Set Date",
-
+	"composer.discard-all-drafts": "Discard all drafts",
+	"composer.no-drafts": "You have no drafts",
 
 	"bootbox.ok": "OK",
 	"bootbox.cancel": "Cancel",

public/language/en-GB/post-queue.json

@@ -19,6 +19,7 @@
 	"notify": "Notify",
 	"notify-user": "Notify User",
 	"confirm-reject": "Do you want to reject this post?",
+	"confirm-remove": "Do you want to remove this post?",
 	"bulk-actions": "Bulk Actions",
 	"accept-all": "Accept All",
 	"accept-selected": "Accept Selected",
@@ -26,6 +27,10 @@
 	"reject-all-confirm": "Do you want to reject all posts?",
 	"reject-selected": "Reject Selected",
 	"reject-selected-confirm": "Do you want to reject %1 selected posts?",
+	"remove-all": "Remove all",
+	"remove-all-confirm": "Do you want to remove all posts?",
+	"remove-selected": "Remove Selected",
+	"remove-selected-confirm": "Do you want to remove %1 selected posts?",
 	"bulk-accept-success": "%1 posts accepted",
 	"bulk-reject-success": "%1 posts rejected"
 }

public/language/en-GB/topic.json

@@ -43,16 +43,26 @@
 	"ban-ip": "Ban IP",
 	"view-history": "Edit History",
 
-	"locked-by": "Locked by",
-	"unlocked-by": "Unlocked by",
-	"pinned-by": "Pinned by",
-	"unpinned-by": "Unpinned by",
-	"deleted-by": "Deleted by",
-	"restored-by": "Restored by",
-	"moved-from-by": "Moved from %1 by",
-	"queued-by": "Post queued for approval →",
-	"backlink": "Referenced by",
-	"forked-by": "Forked by",
+	"user-locked-topic-ago": "%1 locked this topic %2",
+	"user-locked-topic-on": "%1 locked this topic on %2",
+	"user-unlocked-topic-ago": "%1 unlocked this topic %2",
+	"user-unlocked-topic-on": "%1 unlocked this topic on %2",
+	"user-pinned-topic-ago": "%1 pinned this topic %2",
+	"user-pinned-topic-on": "%1 pinned this topic on %2",
+	"user-unpinned-topic-ago": "%1 unpinned this topic %2",
+	"user-unpinned-topic-on": "%1 unpinned this topic on %2",
+	"user-deleted-topic-ago": "%1 deleted this topic %2",
+	"user-deleted-topic-on": "%1 deleted this topic on %2",
+	"user-restored-topic-ago": "%1 restored this topic %2",
+	"user-restored-topic-on": "%1 restored this topic on %2",
+	"user-moved-topic-from-ago": "%1 moved this topic from %2 %3",
+	"user-moved-topic-from-on": "%1 moved this topic from %2 on %3",
+	"user-queued-post-ago": "%1 <a href=\"%2\">queued</a> post for approval %3",
+	"user-queued-post-on": "%1 <a href=\"%2\">queued</a> post for approval on %3",
+	"user-referenced-topic-ago": "%1 <a href=\"%2\">referenced</a> this topic %3",
+	"user-referenced-topic-on": "%1 <a href=\"%2\">referenced</a> this topic on %3",
+	"user-forked-topic-ago": "%1 <a href=\"%2\">forked</a> this topic %3",
+	"user-forked-topic-on": "%1 <a href=\"%2\">forked</a> this topic on %3",
 
 	"bookmark_instructions" : "Click here to return to the last read post in this thread.",
 
@@ -107,7 +117,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 +150,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,10 +165,12 @@
 	"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...",
 	"composer.handle_placeholder": "Enter your name/handle here",
+	"composer.hide": "Hide",
 	"composer.discard": "Discard",
 	"composer.submit": "Submit",
 	"composer.additional-options": "Additional Options",
@@ -211,5 +223,8 @@
 	"last-post": "Last post",
 	"go-to-my-next-post": "Go to my next post",
 	"no-more-next-post": "You don't have more posts in this topic",
-	"post-quick-reply": "Post quick reply"
+	"post-quick-reply": "Quick reply",
+
+	"navigator.index": "Post %1 of %2",
+	"navigator.unread": "%1 unread"
 }

public/language/en-GB/user.json

@@ -45,6 +45,7 @@
 	"followers": "Followers",
 	"following": "Following",
 	"blocks": "Blocks",
+	"blocked-users": "Blocked users",
 	"block_toggle": "Toggle Block",
 	"block_user": "Block User",
 	"unblock_user": "Unblock User",
@@ -71,6 +72,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/privileges.less

@@ -1,36 +0,0 @@
-.page-admin-privileges {
-	@keyframes fadeOut {
-		0% {background-color: @brand-primary;}
-		100% {background-color: white;}
-	}
-
-	[data-group-name].selected, [data-uid].selected {
-		animation-name: fadeOut;
-		animation-duration: 5s;
-		animation-fill-mode: both;
-		animation-timing-function: ease-out;
-	}
-
-	.privilege-table {
-		td:first-child {
-			white-space: nowrap;
-		}
-
-		td[data-delta="true"] > input {
-			&:after {
-				border-color: @state-success-text;
-				background-color: @state-success-text;
-			}
-		}
-
-		td[data-delta="false"] > input {
-			&:after {
-				border-color: @state-danger-bg;
-			}
-
-			&:indeterminate:after {
-				background-color: @state-danger-bg;
-			}
-		}
-	}
-}

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/alerts.less

@@ -1,95 +0,0 @@
-.alert-window {
-	position: fixed;
-	width: 300px;
-	z-index: 10002;
-
-	right: 20px;
-	bottom: 0px;
-
-	.alert {
-		.close {
-			color: inherit;
-		}
-
-		&::before {
-			position: relative;
-			top: -15px;
-			left: -15px;
-			display: block;
-			height: 2px;
-			width: 0;
-			transition: inherit;
-		}
-
-		&.alert-info::before {
-			background-color: @brand-info;
-		}
-
-		&.alert-warning::before {
-			background-color: @brand-warning;
-		}
-
-		&.alert-success::before {
-			background-color: @brand-success;
-		}
-
-		&.alert-danger::before {
-			background-color: @brand-danger;
-		}
-
-		&.animate {
-			&.alert-info::before {
-				background-color: lighten(@brand-info, 25%);
-			}
-			
-			&.alert-warning::before {
-				background-color: lighten(@brand-warning, 25%);
-			}
-			
-			&.alert-success::before {
-				background-color: lighten(@brand-success, 25%);
-			}
-			
-			&.alert-danger::before {
-				background-color: lighten(@brand-danger, 25%);
-			}
-			
-			&::before {
-				width: ~"calc(100% + 50px)";
-			}
-		}
-
-		background-color: white;
-		border: 0;
-		border-left: 5px solid !important;
-		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
-
-		strong {
-			text-transform: uppercase;
-		}
-
-		p {
-			padding: 10px 0px 0px;
-		}
-
-		&.alert-info {
-			color: @brand-info;
-			border-color: @brand-info;
-		}
-
-		&.alert-warning {
-			color: @brand-warning;
-			border-color: @brand-warning;
-		}
-
-		&.alert-success {
-			color: @brand-success;
-			border-color: @brand-success;
-		}
-
-		&.alert-danger {
-			color: @brand-danger;
-			border-color: @brand-danger;
-		}
-	}
-}

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/generics.less

@@ -1,184 +0,0 @@
-.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;
-}
-
-.topic-watch-dropdown {
-	.help-text {
-		margin-left: 20px;
-	}
-}
-
-.category-list {
-	padding: 0;
-
-	li {
-		.inline-block;
-		.pointer;
-		padding: 0.5em;
-		margin: 0.25em;
-		.border-radius(3px);
-
-		&.disabled {
-			background-color: #888!important;
-			opacity: 0.5;
-		}
-	}
-}
-
-.user-list {
-	padding-left: 2rem;
-	padding-top: 1rem;
-
-	li {
-		.pointer;
-		display: inline-block;
-		list-style-type: none;
-		padding: 0.5rem 1rem;
-
-		&:hover {
-			background: #eee;
-		}
-
-		.avatar  {
-			float: left;
-			margin-right: 1rem;
-		}
-
-		span {
-			vertical-align: middle;
-			display: inline-block;
-		}
-	}
-}
-
-.user-icon {
-	display: inline-block;
-	text-align: center;
-	color: @gray-lighter;
-	font-weight: normal;
-	vertical-align: middle;
-	overflow: hidden;	/* stops alt text from overflowing past boundaries if image does not load */
-	white-space: nowrap;
-
-	&:before {
-		content: '';
-		display: inline-block;
-		height: 100%;
-		vertical-align: middle;
-	}
-}
-
-.avatar {
-	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
-	.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);
-	}
-
-	&.avatar-rounded {
-		border-radius: 50%;
-	}
-}
-
-.ban-modal {
-	.form-inline, .form-group {
-		width: 100%;
-	}
-
-	.units {
-		line-height: 5rem;
-	}
-}
-
-.admin .ban-modal .units {
-	line-height: 1.846;
-}
-
-#crop-picture-modal {
-	#cropped-image {
-		max-width: 100%;
-	}
-
-	.cropper-container.cropper-bg {
-		max-width: 100%;
-	}
-}
-
-.necro-post {
-	color: rgba(127,127,127,.5);
-	font-size: 1.5em;
-	margin-bottom: 20px;
-	text-align: center;
-	text-transform: uppercase;
-}
-
-.timeline-event {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-
-	.timeline-badge {
-		padding: 1rem;
-	}
-}
-
-.imagedrop {
-	position: absolute;
-	text-align: center;
-	font-size: 24px;
-	color: @gray-light;
-	width: 100%;
-	display: none;
-}

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/less/mixins.less

@@ -1,80 +0,0 @@
-.no-select {
-	-webkit-touch-callout: none;
-	-webkit-user-select: none;
-	-khtml-user-select: none;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-}
-
-.pointer {
-	cursor: pointer;
-	*cursor: hand;
-}
-
-.inline-block {
-	display: inline-block;
-	*display: inline;
-	zoom: 1;
-}
-
-.clear {
-	clear: both;
-}
-
-.zebra {
-	&:nth-child(even) {
-		background: rgba(191,191,191,0.2);
-	}
-
-	&:nth-child(odd) {
-		background: rgba(223,223,223,0.2);
-	}
-}
-
-.border-radius (@radius: 5px) {
-	-webkit-border-radius: @radius;
-	-moz-border-radius: @radius;
-	-ms-border-radius: @radius;
-	-o-border-radius: @radius;
-	border-radius: @radius;
-}
-
-.text-ellipsis {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.fix-lists {
-	ul {
-		> li {
-			list-style-type: disc;
-
-			ul > li {
-				list-style-type: circle;
-
-				ul > li {
-					list-style-type: square;
-				}
-			}
-		}
-	}
-
-	> ul, > ol {
-		margin-bottom: 10px;
-	}
-}
-
-.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/openapi/read.yaml

@@ -182,14 +182,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,21 +31,19 @@ body {
 
 	h1 {
 		font-size: 35px;
-		margin-bottom: 50px;
 	}
-
-	label {
+	.form-label {
 		font-weight: 700;
-		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 +51,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 +69,7 @@ body {
 		}
 	}
 	button.floating-button {
-		background: @brand-primary !important;
-	}
-
-	.user-img {
-		width:24px;
-		height:24px;
+		background: $primary !important;
 	}
 
 	.nodebb-logo {
@@ -102,7 +80,7 @@ body {
 			vertical-align: -43%;
 		}
 
-		.box-header-font;
+		@include box-header-font;
 		color: #fff;
 	}
 
@@ -110,48 +88,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: 36px;
+				height: 36px;
+				cursor: pointer;
+				line-height: 36px;
 				text-align: center;
-				color: @gray-dark;
+				color: $gray-800;
+				margin: 4px;
 
 				&:hover, &.selected {
-					background: @brand-primary;
+					background: $primary;
 					color: white;
 				}
 			}
@@ -167,26 +149,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 +167,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 +196,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 +220,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;
 	}
 }
 
@@ -262,32 +250,38 @@ body {
 	}
 }
 
-.mdl-switch.is-checked .mdl-switch__ripple-container {
-	cursor: pointer !important;
-}
-
-.mdl-switch.is-checked .mdl-switch__thumb {
-	background: @brand-primary !important;
-}
-
-.mdl-switch.is-checked .mdl-switch__track {
-	background: lighten(@brand-primary, 20%) !important;
-}
-
 * > .checkbox:first-child {
 	margin-top: 0px;
 }
 
-[class^="col-"] .mdl-switch__label {
-	padding-right: 15px;
-}
-
 .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;
+}
+
+#save {
+	transition: background-color 500ms linear;
+
+	&.saved {
+		background-color: $success;
+
+		i {
+			@include fa-icon-solid($fa-var-check);
+		}
+	}
 }

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,22 +37,14 @@
 
 			&: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;
 	}
-
-	.acp-sidebar {
-		.mdl-switch__label {
-			margin-left: 24px;
-    		display: block;
-			left: 0;
-		}
-	}
 }

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; }
@@ -51,4 +42,11 @@
 			min-height: 110px;
 		}
 	}
+}
+
+.page-admin-rewards {
+	#new {
+		bottom: calc(64px + $spacer);
+		background-color: $success;
+	}
 }

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

@@ -0,0 +1,19 @@
+.page-admin-privileges {
+	@keyframes fadeOut {
+		0% {background-color: $primary;}
+		100% {background-color: white;}
+	}
+
+	[data-group-name].selected, [data-uid].selected {
+		animation-name: fadeOut;
+		animation-duration: 5s;
+		animation-fill-mode: both;
+		animation-timing-function: ease-out;
+	}
+
+	.privilege-table {
+		td:first-child {
+			white-space: nowrap;
+		}
+	}
+}

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%;
@@ -31,11 +31,6 @@
 			font-weight: 400;
 		}
 
-		#user_label {
-			right: 0px;
-			bottom: 7px;
-		}
-
 		#main-menu {
 			display: none;
 		}
@@ -93,7 +88,7 @@
 				display: flex;
 				justify-content: center;
 			}
-			
+
 			.alert {
 				border-radius: 0;
 
@@ -170,7 +165,7 @@
 		height: 100%;
 		overflow-y: hidden;
 	}
-	
+
 	.slideout-open {
 		overflow-y: hidden;
 		height: 100%;

public/scss/admin/modules/alerts.scss

@@ -0,0 +1,124 @@
+.alert-window {
+	position: fixed;
+	width: 300px;
+	z-index: 10002;
+
+	right: 20px;
+	bottom: 0px;
+
+	.alert {
+		.close {
+			color: inherit;
+		}
+
+		&::before {
+			position: relative;
+			top: -15px;
+			left: -15px;
+			display: block;
+			height: 2px;
+			width: 0;
+			transition: inherit;
+		}
+
+		&.alert-info {
+			.btn-close {
+				$btn-close-color: $info;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			&::before {
+				background-color: $info;
+			}
+		}
+
+		&.alert-warning {
+			.btn-close {
+				$btn-close-color: $warning;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			::before {
+				background-color: $warning;
+			}
+		}
+
+		&.alert-success {
+			.btn-close {
+				$btn-close-color: $success;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			::before {
+				background-color: $success;
+			}
+		}
+
+		&.alert-danger {
+			.btn-close {
+				$btn-close-color: $danger;
+				background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>"));
+			}
+
+			::before {
+				background-color: $danger;
+			}
+		}
+
+		&.animate {
+			&.alert-info::before {
+				background-color: lighten($info, 25%);
+			}
+
+			&.alert-warning::before {
+				background-color: lighten($warning, 25%);
+			}
+
+			&.alert-success::before {
+				background-color: lighten($success, 25%);
+			}
+
+			&.alert-danger::before {
+				background-color: lighten($danger, 25%);
+			}
+
+			&::before {
+				width: calc(100% + 50px);
+			}
+		}
+
+		background-color: white;
+		padding-right: 16px;
+		border: 0;
+		border-left: 5px solid !important;
+		box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25), 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
+
+		strong {
+			text-transform: uppercase;
+		}
+
+		p {
+			padding: 10px 0px 0px;
+		}
+
+		&.alert-info {
+			color: $info;
+			border-color: $info;
+		}
+
+		&.alert-warning {
+			color: $warning;
+			border-color: $warning;
+		}
+
+		&.alert-success {
+			color: $success;
+			border-color: $success;
+		}
+
+		&.alert-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,7 @@
+$fa-font-path: "vendor/fontawesome/webfonts/6.2.0";
+@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

@@ -0,0 +1,195 @@
+
+.flex-1 {
+	flex: 1 1 0%;
+}
+
+.pointer {
+	@include pointer;
+}
+
+.topic-watch-dropdown {
+	.help-text {
+		margin-left: 20px;
+	}
+}
+
+[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 {
+		@include inline-block;
+		@include pointer;
+		padding: 0.5em;
+		margin: 0.25em;
+		@include border-radius(3px);
+
+		&.disabled {
+			background-color: $gray-600!important;
+			opacity: 0.5;
+		}
+	}
+}
+
+.user-list {
+	padding-left: 2rem;
+	padding-top: 1rem;
+
+	li {
+		@include pointer;
+		display: inline-block;
+		list-style-type: none;
+		padding: 0.5rem 1rem;
+
+		&:hover {
+			background: $gray-300;
+		}
+
+		.avatar  {
+			float: left;
+			margin-right: 1rem;
+		}
+
+		span {
+			vertical-align: middle;
+			display: inline-block;
+		}
+	}
+}
+
+@mixin user-icon() {
+	display: inline-flex;
+	justify-content: center;
+	align-items: center;
+	color: $white;
+	font-weight: normal;
+	overflow: hidden;	/* stops alt text from overflowing past boundaries if image does not load */
+	white-space: nowrap;
+}
+
+.avatar {
+	/* Contains the user icon class as a mixin, so there's no need to include that in the template */
+	@include user-icon;
+
+	$size: var(--avatar-size);
+	@include user-icon-style($size, calc($size * 0.6));
+
+	&.avatar-rounded {
+		border-radius: 50%;
+	}
+
+	&+.avatar {
+		display: none;
+	}
+}
+
+#crop-picture-modal {
+	#cropped-image {
+		max-width: 100%;
+	}
+
+	.cropper-container.cropper-bg {
+		max-width: 100%;
+	}
+}
+
+blockquote {
+	font-style: italic;
+	border-left: 4px solid $primary;
+	padding: 1rem;
+	p:last-child {
+		margin-bottom: 0;
+	}
+}
+
+.necro-post {
+	text-align: center;
+	text-transform: uppercase;
+}
+
+.timeline-event {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+
+	.timeline-badge {
+		padding: 1rem;
+	}
+}
+
+.imagedrop {
+	position: absolute;
+	text-align: center;
+	font-size: 24px;
+	color: $gray-600;
+	width: 100%;
+	display: none;
+}
+
+.hover-parent {
+	.hover-d-block, .hover-d-flex {
+		display: none!important;
+	}
+	.hover-visible {
+		visibility: hidden;
+	}
+	&:hover {
+		.hover-d-block {
+			display: block!important;
+		}
+		.hover-d-flex {
+			display: flex!important;
+		}
+		.hover-visible {
+			visibility: visible;
+		}
+	}
+}
+
+.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

@@ -0,0 +1,89 @@
+@mixin no-select() {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+@mixin pointer() {
+	cursor: pointer;
+	*cursor: hand;
+}
+
+@mixin inline-block() {
+	display: inline-block;
+	*display: inline;
+	zoom: 1;
+}
+
+@mixin clear() {
+	clear: both;
+}
+
+@mixin zebra() {
+	&:nth-child(even) {
+		background: rgba(191,191,191,0.2);
+	}
+
+	&:nth-child(odd) {
+		background: rgba(223,223,223,0.2);
+	}
+}
+
+@mixin border-radius($radius: 5px){
+	-webkit-border-radius: $radius;
+	-moz-border-radius: $radius;
+	-ms-border-radius: $radius;
+	-o-border-radius: $radius;
+	border-radius: $radius;
+}
+
+@mixin text-ellipsis() {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+@mixin fix-lists() {
+	ul {
+		> li {
+			list-style-type: disc;
+
+			ul > li {
+				list-style-type: circle;
+
+				ul > li {
+					list-style-type: square;
+				}
+			}
+		}
+	}
+
+	> ul, > ol {
+		margin-bottom: 10px;
+	}
+}
+
+@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;
+}
+
+@mixin line-clamp($lines) {
+	overflow: hidden;
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: $lines;
+	white-space: initial;
+}
+
+@for $i from 1 through 6 {
+	.line-clamp-#{$i} {
+		@include line-clamp($i);
+	}
+}

public/scss/modals.scss

@@ -2,10 +2,10 @@
 	position: fixed;
 	bottom: 10%;
 	right: 2rem;
-	z-index: 1;
+	z-index: $zindex-modal;
 }
 
-@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,189 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+// borders, see https://getbootstrap.com/docs/5.2/utilities/api/#enable-responsive
+$utilities: map-merge(
+  $utilities, (
+    "border": map-merge(
+      map-get($utilities, "border"),
+      ( responsive: true ),
+    ),
+	"border-start": map-merge(
+      map-get($utilities, "border-start"),
+      ( responsive: true ),
+    ),
+	"border-end": map-merge(
+      map-get($utilities, "border-end"),
+      ( responsive: true ),
+    ),
+	"border-top": map-merge(
+		map-get($utilities, "border-top"),
+		( responsive: true ),
+	  ),
+	"border-bottom": map-merge(
+		map-get($utilities, "border-bottom"),
+		( responsive: true ),
+	),
+  )
+);
+
+// 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

@@ -2,9 +2,9 @@
 
 require('../app');
 
-// scripts-admin.js contains javascript files
+// scripts-admin.js is generated during build, it contains javascript files
 // from plugins that add files to "acpScripts" block in plugin.json
-// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line
 require('../../scripts-admin');
 
 app.onDomReady();
@@ -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) {
@@ -210,8 +210,7 @@ app.onDomReady();
 				slideout.close();
 
 				env = utils.findBootstrapEnvironment();
-
-				if (env === 'md' || env === 'lg') {
+				if (['xxl', 'xl', 'lg'].includes(env)) {
 					slideout.disableTouch();
 					$('#header').css({
 						position: 'relative',

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/rewards.js

@@ -169,16 +169,21 @@ define('admin/extend/rewards', ['alerts'], function (alerts) {
 
 		socket.emit('admin.rewards.save', activeRewards, function (err, result) {
 			if (err) {
-				alerts.error(err);
-			} else {
-				alerts.success('[[admin/extend/rewards:alert.save-success]]');
-				// newly added rewards are missing data-id, update to prevent rewards getting duplicated
-				$('#active li').each(function (index) {
-					if (!$(this).attr('data-id')) {
-						$(this).attr('data-id', result[index].id);
-					}
-				});
+				return alerts.error(err);
 			}
+
+			const saveBtn = document.getElementById('save');
+			saveBtn.classList.toggle('saved', true);
+			setTimeout(() => {
+				saveBtn.classList.toggle('saved', false);
+			}, 5000);
+
+			// newly added rewards are missing data-id, update to prevent rewards getting duplicated
+			$('#active li').each(function (index) {
+				if (!$(this).attr('data-id')) {
+					$(this).attr('data-id', result[index].id);
+				}
+			});
 		});
 	}
 

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');
 			}
 		});
 
@@ -127,16 +127,14 @@ define('admin/extend/widgets', [
 
 			socket.emit('admin.widgets.set', saveData, function (err) {
 				if (err) {
-					alerts.error(err);
+					return alerts.error(err);
 				}
 
-				alerts.alert({
-					alert_id: 'admin:widgets',
-					type: 'success',
-					title: '[[admin/extend/widgets:alert.updated]]',
-					message: '[[admin/extend/widgets:alert.update-success]]',
-					timeout: 2500,
-				});
+				const saveBtn = document.getElementById('save');
+				saveBtn.classList.toggle('saved', true);
+				setTimeout(() => {
+					saveBtn.classList.toggle('saved', false);
+				}, 5000);
 			});
 		}
 
@@ -176,13 +174,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 +189,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/admins-mods.js

@@ -114,7 +114,7 @@ define('admin/manage/admins-mods', [
 
 			bootbox.confirm('[[admin/manage/users:alerts.confirm-remove-moderator]]', function (confirm) {
 				if (confirm) {
-					api.delete(`/categories/${cid}/moderator/${uid}`, {}, function (err) {
+					api.del(`/categories/${cid}/moderator/${uid}`, {}, function (err) {
 						if (err) {
 							return alerts.error(err);
 						}

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: {

public/src/admin/manage/category.js

@@ -8,7 +8,8 @@ define('admin/manage/category', [
 	'api',
 	'bootbox',
 	'alerts',
-], function (uploader, iconSelect, categorySelector, Benchpress, api, bootbox, alerts) {
+	'admin/settings',
+], function (uploader, iconSelect, categorySelector, Benchpress, api, bootbox, alerts, settings) {
 	const Category = {};
 	let updateHash = {};
 
@@ -54,14 +55,9 @@ define('admin/manage/category', [
 			}
 
 			const cid = ajaxify.data.category.cid;
-			api.put('/categories/' + cid, updateHash).then((res) => {
+			api.put('/categories/' + cid, updateHash).then(() => {
 				app.flags._unsaved = false;
-				alerts.alert({
-					title: 'Updated Categories',
-					message: 'Category "' + res.name + '" was successfully updated.',
-					type: 'success',
-					timeout: 5000,
-				});
+				settings.toggleSaveSuccess($('#save'));
 				updateHash = {};
 			}).catch(alerts.error);
 
@@ -266,6 +262,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/group.js

@@ -10,7 +10,11 @@ define('admin/manage/group', [
 	'api',
 	'bootbox',
 	'alerts',
-], function (memberList, iconSelect, translator, categorySelector, groupSearch, slugify, api, bootbox, alerts) {
+	'admin/settings',
+], function (
+	memberList, iconSelect, translator, categorySelector, groupSearch,
+	slugify, api, bootbox, alerts, settings
+) {
 	const Groups = {};
 
 	Groups.init = function () {
@@ -104,8 +108,7 @@ define('admin/manage/group', [
 				if (groupName !== newName) {
 					ajaxify.go('admin/manage/groups/' + encodeURIComponent(newName), undefined, true);
 				}
-
-				alerts.success('[[admin/manage/groups:edit.save-success]]');
+				settings.toggleSaveSuccess($('#save'));
 			}).catch(alerts.error);
 			return false;
 		});

public/src/admin/manage/groups.js

@@ -10,48 +10,10 @@ define('admin/manage/groups', [
 	const Groups = {};
 
 	Groups.init = function () {
-		const createModal = $('#create-modal');
-		const createGroupName = $('#create-group-name');
-		const createModalGo = $('#create-modal-go');
-		const createModalError = $('#create-modal-error');
+		handleCreate();
 
 		handleSearch();
 
-		createModal.on('keypress', function (e) {
-			if (e.keyCode === 13) {
-				createModalGo.click();
-			}
-		});
-
-		$('#create').on('click', function () {
-			createModal.modal('show');
-			setTimeout(function () {
-				createGroupName.focus();
-			}, 250);
-		});
-
-		createModalGo.on('click', function () {
-			const submitObj = {
-				name: createGroupName.val(),
-				description: $('#create-group-desc').val(),
-				private: $('#create-group-private').is(':checked') ? 1 : 0,
-				hidden: $('#create-group-hidden').is(':checked') ? 1 : 0,
-			};
-
-			api.post('/groups', submitObj).then((response) => {
-				createModalError.addClass('hide');
-				createGroupName.val('');
-				createModal.on('hidden.bs.modal', function () {
-					ajaxify.go('admin/manage/groups/' + response.name);
-				});
-				createModal.modal('hide');
-			}).catch((err) => {
-				if (!utils.hasLanguageKey(err.status.message)) {
-					err.status.message = '[[admin/manage/groups:alerts.create-failure]]';
-				}
-				createModalError.translateHtml(err.status.message).removeClass('hide');
-			});
-		});
 
 		$('.groups-list').on('click', '[data-action]', function () {
 			const el = $(this);
@@ -84,6 +46,54 @@ define('admin/manage/groups', [
 		});
 	}
 
+	function handleCreate() {
+		$('#create').on('click', function () {
+			app.parseAndTranslate('admin/partials/create_group_modal', {}).then((html) => {
+				html.modal('show');
+
+				html.on('shown.bs.modal', function () {
+					const createModal = $('#create-modal');
+					const createGroupName = $('#create-group-name');
+					const createModalGo = $('#create-modal-go');
+					const createModalError = $('#create-modal-error');
+
+					createGroupName.trigger('focus');
+					createModal.on('keypress', function (e) {
+						if (e.key === 'Enter') {
+							createModalGo.trigger('click');
+						}
+					});
+					html.on('hidden.bs.modal', function () {
+						html.modal('hide');
+						createModal.remove();
+					});
+					createModalGo.on('click', function () {
+						const submitObj = {
+							name: createGroupName.val(),
+							description: $('#create-group-desc').val(),
+							private: $('#create-group-private').is(':checked') ? 1 : 0,
+							hidden: $('#create-group-hidden').is(':checked') ? 1 : 0,
+						};
+
+						api.post('/groups', submitObj).then((response) => {
+							createModalError.addClass('hide');
+							createGroupName.val('');
+							createModal.on('hidden.bs.modal', function () {
+								ajaxify.go('admin/manage/groups/' + response.name);
+							});
+							createModal.modal('hide');
+						}).catch((err) => {
+							if (!utils.hasLanguageKey(err.status.message)) {
+								err.status.message = '[[admin/manage/groups:alerts.create-failure]]';
+							}
+							createModalError.translateHtml(err.status.message).removeClass('hide');
+						});
+					});
+				});
+			});
+		});
+	}
+
 	function handleSearch() {
 		const queryEl = $('#group-search');
 

public/src/admin/manage/privileges.js

@@ -9,7 +9,11 @@ define('admin/manage/privileges', [
 	'categorySelector',
 	'mousetrap',
 	'admin/modules/checkboxRowSelector',
-], function (api, autocomplete, bootbox, alerts, translator, categorySelector, mousetrap, checkboxRowSelector) {
+	'admin/settings',
+], function (
+	api, autocomplete, bootbox, alerts, translator,
+	categorySelector, mousetrap, checkboxRowSelector, settings
+) {
 	const Privileges = {};
 
 	let cid;
@@ -36,13 +40,14 @@ define('admin/manage/privileges', [
 		Privileges.setupPrivilegeTable();
 
 		highlightRow();
-		$('.privilege-filters button:last-child').click();
+		$('.privilege-filters button:first-child').click();
 	};
 
 	Privileges.setupPrivilegeTable = function () {
 		$('.privilege-table-container').on('change', 'input[type="checkbox"]:not(.checkbox-helper)', function () {
+			const checkboxEl = this;
 			const $checkboxEl = $(this);
-			const $wrapperEl = $checkboxEl.parent();
+			const $wrapperEl = $checkboxEl.parents('[data-privilege]');
 			const columnNo = $wrapperEl.index() + 1;
 			const privilege = $wrapperEl.attr('data-privilege');
 			const state = $checkboxEl.prop('checked');
@@ -59,6 +64,7 @@ define('admin/manage/privileges', [
 					bootbox.confirm('[[admin/manage/privileges:alert.confirm-moderate]]', function (confirm) {
 						if (confirm) {
 							$wrapperEl.attr('data-delta', delta);
+							Privileges.applyDeltaState(checkboxEl, delta);
 							Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
 						} else {
 							$checkboxEl.prop('checked', !$checkboxEl.prop('checked'));
@@ -68,6 +74,7 @@ define('admin/manage/privileges', [
 					bootbox.confirm('[[admin/manage/privileges:alert.confirm-admins-mods]]', function (confirm) {
 						if (confirm) {
 							$wrapperEl.attr('data-delta', delta);
+							Privileges.applyDeltaState(checkboxEl, delta);
 							Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
 						} else {
 							$checkboxEl.prop('checked', !$checkboxEl.prop('checked'));
@@ -75,6 +82,7 @@ define('admin/manage/privileges', [
 					});
 				} else {
 					$wrapperEl.attr('data-delta', delta);
+					Privileges.applyDeltaState(checkboxEl, delta);
 					Privileges.exposeSingleAssumedPriv(columnNo, sourceGroupName);
 				}
 				checkboxRowSelector.updateState($checkboxEl);
@@ -88,6 +96,15 @@ define('admin/manage/privileges', [
 		Privileges.addEvents(); // events with confirmation modals
 	};
 
+	Privileges.applyDeltaState = (checkboxEl, delta) => {
+		['bg-success', 'bg-opacity-75', 'border-success'].forEach((className) => {
+			checkboxEl.classList.toggle(className, delta === true);
+		});
+		['bg-danger', 'bg-opacity-50', 'border-danger'].forEach((className) => {
+			checkboxEl.classList.toggle(className, delta === false);
+		});
+	};
+
 	Privileges.addEvents = function () {
 		document.getElementById('save').addEventListener('click', function () {
 			throwConfirmModal('save', Privileges.commit);
@@ -133,7 +150,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);
@@ -170,7 +187,7 @@ define('admin/manage/privileges', [
 					alerts.error(result.reason);
 				});
 			} else {
-				alerts.success('[[admin/manage/privileges:alert.saved]]');
+				settings.toggleSaveSuccess($('#save'));
 			}
 		});
 	};
@@ -191,9 +208,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();
 				});
 
@@ -234,7 +249,7 @@ define('admin/manage/privileges', [
 		applyPrivilegesToColumn(inputSelectorFn, sourceChecked);
 	};
 
-	Privileges.setPrivilege = (member, privilege, state) => api[state ? 'put' : 'delete'](`/categories/${isNaN(cid) ? 0 : cid}/privileges/${encodeURIComponent(privilege)}`, { member });
+	Privileges.setPrivilege = (member, privilege, state) => api[state ? 'put' : 'del'](`/categories/${isNaN(cid) ? 0 : cid}/privileges/${encodeURIComponent(privilege)}`, { member });
 
 	Privileges.addUserToPrivilegeTable = function () {
 		const modal = bootbox.dialog({
@@ -330,7 +345,7 @@ define('admin/manage/privileges', [
 	function getPrivilegesFromRow(sourceGroupName) {
 		const privs = [];
 		$(`.privilege-table tr[data-group-name="${sourceGroupName}"] td input[type="checkbox"]:not(.checkbox-helper)`)
-			.parent()
+			.parents('[data-privilege]')
 			.each(function (idx, el) {
 				if ($(el).find('input').prop('checked')) {
 					privs.push(el.getAttribute('data-privilege'));

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/manage/users.js

@@ -166,7 +166,7 @@ define('admin/manage/users', [
 				return false; // specifically to keep the menu open
 			}
 
-			Benchpress.render('admin/partials/temporary-ban', {}).then(function (html) {
+			Benchpress.render('modals/temporary-ban', {}).then(function (html) {
 				bootbox.dialog({
 					className: 'ban-modal',
 					title: '[[user:ban_account]]',

public/src/admin/modules/colorpicker.js

@@ -1,31 +0,0 @@
-'use strict';
-
-// TODO: no longer used remove in 1.19.0
-define('admin/modules/colorpicker', function () {
-	const colorpicker = {};
-
-	colorpicker.enable = function (inputEl, callback) {
-		(inputEl instanceof jQuery ? inputEl : $(inputEl)).each(function () {
-			const $this = $(this);
-
-			$this.ColorPicker({
-				color: $this.val() || '#000',
-				onChange: function (hsb, hex) {
-					$this.val('#' + hex);
-					if (typeof callback === 'function') {
-						callback(hsb, hex);
-					}
-				},
-				onShow: function (colpkr) {
-					$(colpkr).css('z-index', 1051);
-				},
-			});
-
-			$(window).one('action:ajaxify.start', function () {
-				$this.ColorPickerHide();
-			});
-		});
-	};
-
-	return colorpicker;
-});

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

@@ -52,7 +52,6 @@ define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts', 'settings'
 				if (field.is('input') && inputType === 'checkbox') {
 					const checked = parseInt(app.config[key], 10) === 1;
 					field.prop('checked', checked);
-					field.parents('.mdl-switch').toggleClass('is-checked', checked);
 				} else if (field.is('textarea') || field.is('select') || (field.is('input') && defaultInputs.indexOf(inputType) !== -1)) {
 					field.val(app.config[key]);
 				}
@@ -83,15 +82,7 @@ define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts', 'settings'
 				}
 
 				app.flags._unsaved = false;
-
-				alerts.alert({
-					alert_id: 'config_status',
-					timeout: 2500,
-					title: '[[admin/admin:changes-saved]]',
-					message: '[[admin/admin:changes-saved-message]]',
-					type: 'success',
-				});
-
+				Settings.toggleSaveSuccess(saveBtn);
 				hooks.fire('action:admin.settingsSaved');
 			});
 		});
@@ -120,6 +111,16 @@ define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts', 'settings'
 		}, 0);
 	};
 
+	Settings.toggleSaveSuccess = function (saveBtn) {
+		const saveBtnEl = saveBtn.get(0);
+		if (saveBtnEl) {
+			saveBtnEl.classList.toggle('saved', true);
+			setTimeout(() => {
+				saveBtnEl.classList.toggle('saved', false);
+			}, 5000);
+		}
+	};
+
 	function handleUploads() {
 		$('#content input[data-action="upload"]').each(function () {
 			const uploadBtn = $(this);
@@ -140,6 +141,7 @@ define('admin/settings', ['uploader', 'mousetrap', 'hooks', 'alerts', 'settings'
 
 	function setupTagsInput() {
 		$('[data-field-type="tagsinput"]').tagsinput({
+			tagClass: 'badge bg-info',
 			confirmKeys: [13, 44],
 			trimValue: true,
 		});

public/src/admin/settings/email.js

@@ -9,15 +9,23 @@ define('admin/settings/email', ['ace/ace', 'alerts', 'admin/settings'], function
 		configureEmailTester();
 		configureEmailEditor();
 		handleDigestHourChange();
-		handleSmtpServiceChange();
 
-		$(window).on('action:admin.settingsLoaded action:admin.settingsSaved', handleDigestHourChange);
-		$(window).on('action:admin.settingsSaved', function () {
-			socket.emit('admin.user.restartJobs');
-		});
-		$('[id="email:smtpTransport:service"]').change(handleSmtpServiceChange);
+		$(window).off('action:admin.settingsLoaded', onSettingsLoaded)
+			.on('action:admin.settingsLoaded', onSettingsLoaded);
+		$(window).off('action:admin.settingsSaved', onSettingsSaved)
+			.on('action:admin.settingsSaved', onSettingsSaved);
 	};
 
+	function onSettingsLoaded() {
+		handleDigestHourChange();
+		handleSmtpServiceChange();
+	}
+
+	function onSettingsSaved() {
+		handleDigestHourChange();
+		socket.emit('admin.user.restartJobs');
+	}
+
 	function configureEmailTester() {
 		$('button[data-action="email.test"]').off('click').on('click', function () {
 			socket.emit('admin.email.test', { template: $('#test-email').val() }, function (err) {
@@ -106,20 +114,25 @@ define('admin/settings/email', ['ace/ace', 'alerts', 'admin/settings'], function
 	}
 
 	function handleSmtpServiceChange() {
-		const isCustom = $('[id="email:smtpTransport:service"]').val() === 'nodebb-custom-smtp';
-		$('[id="email:smtpTransport:custom-service"]')[isCustom ? 'slideDown' : 'slideUp'](isCustom);
-
-		const enabledEl = document.getElementById('email:smtpTransport:enabled');
-		if (enabledEl) {
-			if (!enabledEl.checked) {
-				enabledEl.closest('label').classList.toggle('is-checked', true);
-				enabledEl.checked = true;
-				alerts.alert({
-					message: '[[admin/settings/email:smtp-transport.auto-enable-toast]]',
-					timeout: 5000,
-				});
-			}
+		function toggleCustomService() {
+			const isCustom = $('[id="email:smtpTransport:service"]').val() === 'nodebb-custom-smtp';
+			$('[id="email:smtpTransport:custom-service"]')[isCustom ? 'slideDown' : 'slideUp'](isCustom);
 		}
+		toggleCustomService();
+		$('[id="email:smtpTransport:service"]').change(function () {
+			toggleCustomService();
+
+			const enabledEl = document.getElementById('email:smtpTransport:enabled');
+			if (enabledEl) {
+				if (!enabledEl.checked) {
+					enabledEl.checked = true;
+					alerts.alert({
+						message: '[[admin/settings/email:smtp-transport.auto-enable-toast]]',
+						timeout: 5000,
+					});
+				}
+			}
+		});
 	}
 
 	return module;

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() {
@@ -129,7 +145,11 @@ define('admin/settings/navigation', [
 			if (err) {
 				alerts.error(err);
 			} else {
-				alerts.success('Successfully saved navigation');
+				const saveBtn = document.getElementById('save');
+				saveBtn.classList.toggle('saved', true);
+				setTimeout(() => {
+					saveBtn.classList.toggle('saved', false);
+				}, 5000);
 			}
 		});
 	}

public/src/app.js

@@ -10,6 +10,7 @@ window.utils = require('./utils');
 require('timeago');
 
 const Benchpress = require('benchpressjs');
+
 Benchpress.setGlobal('config', config);
 
 require('./sockets');
@@ -21,7 +22,7 @@ app = window.app || {};
 Object.defineProperty(app, 'isFocused', {
 	get() {
 		return document.visibilityState === 'visible';
-	}
+	},
 });
 app.currentRoom = null;
 app.widgets = {};
@@ -148,41 +149,6 @@ if (document.readyState === 'loading') {
 		}
 		const result = await Promise.all(modules.map(requireModule));
 		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) {
@@ -224,8 +190,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 +199,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 +219,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 +245,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 +252,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 +261,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.js

@@ -2,9 +2,9 @@
 
 require('./app');
 
-// scripts-client.js contains javascript files
+// scripts-client.js is generated during build, it contains javascript files
 // from plugins that add files to "scripts" block in plugin.json
-// eslint-disable-next-line import/no-unresolved
+// eslint-disable-next-line
 require('../scripts-client');
 
 app.onDomReady();

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');
 	};