diff --git a/app/livechat/client/views/app/tabbar/visitorEdit.js b/app/livechat/client/views/app/tabbar/visitorEdit.js
index 21065ec5eae5..3f9cf9b3e768 100644
--- a/app/livechat/client/views/app/tabbar/visitorEdit.js
+++ b/app/livechat/client/views/app/tabbar/visitorEdit.js
@@ -4,7 +4,7 @@ import { Template } from 'meteor/templating';
import toastr from 'toastr';
import { t } from '../../../../../utils';
-import { hasRole } from '../../../../../authorization';
+import { hasAtLeastOnePermission, hasPermission, hasRole } from '../../../../../authorization';
import './visitorEdit.html';
import { APIClient } from '../../../../../utils/client';
import { getCustomFormTemplate } from '../customTemplates/register';
@@ -16,6 +16,14 @@ Template.visitorEdit.helpers({
return Template.instance().visitor.get();
},
+ canViewCustomFields() {
+ return hasAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields']);
+ },
+
+ canOnlyViewCustomFields() {
+ return hasPermission('view-livechat-room-customfields') && !hasPermission('edit-livechat-room-customfields');
+ },
+
visitorCustomFields() {
const customFields = Template.instance().customFields.get();
if (!customFields || customFields.length === 0) {
diff --git a/app/livechat/client/views/app/tabbar/visitorInfo.html b/app/livechat/client/views/app/tabbar/visitorInfo.html
index 0ba4aa7d6c9e..b802b5962612 100644
--- a/app/livechat/client/views/app/tabbar/visitorInfo.html
+++ b/app/livechat/client/views/app/tabbar/visitorInfo.html
@@ -64,10 +64,10 @@
{{_ "Conversation"}}
{{/if}}
{{#if canForwardGuest}}
-
+
{{/if}}
{{#if canReturnQueue}}
-
+
{{/if}}
{{/if}}
diff --git a/app/livechat/client/views/app/tabbar/visitorInfo.js b/app/livechat/client/views/app/tabbar/visitorInfo.js
index 6c975b4ee80b..a1bdb1600248 100644
--- a/app/livechat/client/views/app/tabbar/visitorInfo.js
+++ b/app/livechat/client/views/app/tabbar/visitorInfo.js
@@ -93,6 +93,9 @@ Template.visitorInfo.helpers({
customVisitorFields() {
const customFields = Template.instance().customFields.get();
+ if (!hasAtLeastOnePermission(['view-livechat-room-customfields', 'edit-livechat-room-customfields'])) {
+ return;
+ }
if (!customFields || customFields.length === 0) {
return [];
}
diff --git a/app/livechat/server/lib/Livechat.js b/app/livechat/server/lib/Livechat.js
index 1f00c843eed5..33a77296e75c 100644
--- a/app/livechat/server/lib/Livechat.js
+++ b/app/livechat/server/lib/Livechat.js
@@ -31,7 +31,7 @@ import {
LivechatInquiry,
} from '../../../models';
import { Logger } from '../../../logger';
-import { addUserRoles, hasRole, removeUserFromRoles } from '../../../authorization';
+import { addUserRoles, hasPermission, hasRole, removeUserFromRoles } from '../../../authorization';
import * as Mailer from '../../../mailer';
import { sendMessage } from '../../../lib/server/functions/sendMessage';
import { updateMessage } from '../../../lib/server/functions/updateMessage';
@@ -277,7 +277,7 @@ export const Livechat = {
return false;
},
- saveGuest({ _id, name, email, phone, livechatData = {} }) {
+ saveGuest({ _id, name, email, phone, livechatData = {} }, userId) {
const updateData = {};
if (name) {
@@ -292,20 +292,23 @@ export const Livechat = {
const customFields = {};
const fields = LivechatCustomField.find({ scope: 'visitor' });
- fields.forEach((field) => {
- if (!livechatData.hasOwnProperty(field._id)) {
- return;
- }
- const value = s.trim(livechatData[field._id]);
- if (value !== '' && field.regexp !== undefined && field.regexp !== '') {
- const regexp = new RegExp(field.regexp);
- if (!regexp.test(value)) {
- throw new Meteor.Error(TAPi18n.__('error-invalid-custom-field-value', { field: field.label }));
+
+ if (!userId || hasPermission(userId, 'edit-livechat-room-customfields')) {
+ fields.forEach((field) => {
+ if (!livechatData.hasOwnProperty(field._id)) {
+ return;
}
- }
- customFields[field._id] = value;
- });
- updateData.livechatData = customFields;
+ const value = s.trim(livechatData[field._id]);
+ if (value !== '' && field.regexp !== undefined && field.regexp !== '') {
+ const regexp = new RegExp(field.regexp);
+ if (!regexp.test(value)) {
+ throw new Meteor.Error(TAPi18n.__('error-invalid-custom-field-value', { field: field.label }));
+ }
+ }
+ customFields[field._id] = value;
+ });
+ updateData.livechatData = customFields;
+ }
const ret = LivechatVisitors.saveGuestById(_id, updateData);
Meteor.defer(() => {
@@ -461,25 +464,27 @@ export const Livechat = {
return rcSettings;
},
- saveRoomInfo(roomData, guestData) {
+ saveRoomInfo(roomData, guestData, userId) {
const { livechatData = {} } = roomData;
const customFields = {};
- const fields = LivechatCustomField.find({ scope: 'room' });
- fields.forEach((field) => {
- if (!livechatData.hasOwnProperty(field._id)) {
- return;
- }
- const value = s.trim(livechatData[field._id]);
- if (value !== '' && field.regexp !== undefined && field.regexp !== '') {
- const regexp = new RegExp(field.regexp);
- if (!regexp.test(value)) {
- throw new Meteor.Error(TAPi18n.__('error-invalid-custom-field-value', { field: field.label }));
+ if (!userId || hasPermission(userId, 'edit-livechat-room-customfields')) {
+ const fields = LivechatCustomField.find({ scope: 'room' });
+ fields.forEach((field) => {
+ if (!livechatData.hasOwnProperty(field._id)) {
+ return;
}
- }
- customFields[field._id] = value;
- });
- roomData.livechatData = customFields;
+ const value = s.trim(livechatData[field._id]);
+ if (value !== '' && field.regexp !== undefined && field.regexp !== '') {
+ const regexp = new RegExp(field.regexp);
+ if (!regexp.test(value)) {
+ throw new Meteor.Error(TAPi18n.__('error-invalid-custom-field-value', { field: field.label }));
+ }
+ }
+ customFields[field._id] = value;
+ });
+ roomData.livechatData = customFields;
+ }
if (!LivechatRooms.saveRoomById(roomData)) {
return false;
diff --git a/app/livechat/server/methods/saveInfo.js b/app/livechat/server/methods/saveInfo.js
index 7d2fe0534f63..c5c1f5eecfdf 100644
--- a/app/livechat/server/methods/saveInfo.js
+++ b/app/livechat/server/methods/saveInfo.js
@@ -42,7 +42,7 @@ Meteor.methods({
delete guestData.phone;
}
- const ret = Livechat.saveGuest(guestData) && Livechat.saveRoomInfo(roomData, guestData);
+ const ret = Livechat.saveGuest(guestData, userId) && Livechat.saveRoomInfo(roomData, guestData, userId);
const user = Meteor.users.findOne({ _id: userId }, { fields: { _id: 1, username: 1 } });
diff --git a/app/livechat/server/startup.js b/app/livechat/server/startup.js
index 8bf9e83e3c3e..62f4f846b4a6 100644
--- a/app/livechat/server/startup.js
+++ b/app/livechat/server/startup.js
@@ -11,6 +11,17 @@ import { RoutingManager } from './lib/RoutingManager';
import { createLivechatQueueView } from './lib/Helper';
import { LivechatAgentActivityMonitor } from './statistics/LivechatAgentActivityMonitor';
+function allowAccessClosedRoomOfSameDepartment(room, user) {
+ if (!room || !user || room.t !== 'l' || !room.departmentId || room.open) {
+ return;
+ }
+ const agentOfDepartment = LivechatDepartmentAgents.findOneByAgentIdAndDepartmentId(user._id, room.departmentId);
+ if (!agentOfDepartment) {
+ return;
+ }
+ return hasPermission(user._id, 'view-livechat-room-closed-same-department');
+}
+
Meteor.startup(() => {
roomTypes.setRoomFind('l', (_id) => LivechatRooms.findOneById(_id));
@@ -24,7 +35,7 @@ Meteor.startup(() => {
}
const { _id: userId } = user;
const { servedBy: { _id: agentId } = {} } = room;
- return userId === agentId;
+ return userId === agentId || (!room.open && hasPermission(user._id, 'view-livechat-room-closed-by-another-agent'));
});
addRoomAccessValidator(function(room, user, extraData) {
@@ -59,6 +70,8 @@ Meteor.startup(() => {
return inquiry && inquiry.status === 'queued';
});
+ addRoomAccessValidator(allowAccessClosedRoomOfSameDepartment);
+
callbacks.add('beforeLeaveRoom', function(user, room) {
if (room.t !== 'l') {
return user;
diff --git a/app/mailer/server/api.js b/app/mailer/server/api.js
index 45c7f10030f3..38bb11418273 100644
--- a/app/mailer/server/api.js
+++ b/app/mailer/server/api.js
@@ -23,7 +23,7 @@ settings.get('Language', (key, value) => {
lng = value || 'en';
});
-export const replacekey = (str, key, value = '') => str.replace(new RegExp(`(\\[${ key }\\]|__${ key }__)`, 'igm'), value);
+export const replacekey = (str, key, value = '') => str.replace(new RegExp(`(\\[${ key }\\]|__${ key }__)`, 'igm'), s.escapeHTML(value));
export const translate = (str) => str.replace(/\{ ?([^\} ]+)(( ([^\}]+))+)? ?\}/gmi, (match, key) => TAPi18n.__(key, { lng }));
export const replace = function replace(str, data = {}) {
if (!str) {
diff --git a/app/models/server/models/LivechatDepartmentAgents.js b/app/models/server/models/LivechatDepartmentAgents.js
index 6ca6a2345428..f729b911f8b6 100644
--- a/app/models/server/models/LivechatDepartmentAgents.js
+++ b/app/models/server/models/LivechatDepartmentAgents.js
@@ -23,6 +23,10 @@ export class LivechatDepartmentAgents extends Base {
return this.find({ agentId });
}
+ findOneByAgentIdAndDepartmentId(agentId, departmentId) {
+ return this.findOne({ agentId, departmentId });
+ }
+
saveAgent(agent) {
return this.upsert({
agentId: agent.agentId,
diff --git a/app/models/server/models/Settings.js b/app/models/server/models/Settings.js
index 6cca3203f251..a03c81a04100 100644
--- a/app/models/server/models/Settings.js
+++ b/app/models/server/models/Settings.js
@@ -58,7 +58,7 @@ export class Settings extends Base {
filter._id = { $in: ids };
}
- return this.find(filter, { fields: { _id: 1, value: 1 } });
+ return this.find(filter, { fields: { _id: 1, value: 1, editor: 1 } });
}
findNotHiddenPublicUpdatedAfter(updatedAt) {
@@ -70,7 +70,7 @@ export class Settings extends Base {
},
};
- return this.find(filter, { fields: { _id: 1, value: 1 } });
+ return this.find(filter, { fields: { _id: 1, value: 1, editor: 1 } });
}
findNotHiddenPrivate() {
diff --git a/app/oauth2-server-config/client/admin/route.js b/app/oauth2-server-config/client/admin/route.js
deleted file mode 100644
index c274dbaa6087..000000000000
--- a/app/oauth2-server-config/client/admin/route.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { BlazeLayout } from 'meteor/kadira:blaze-layout';
-
-import { registerAdminRoute } from '../../../../client/admin';
-import { t } from '../../../utils';
-
-registerAdminRoute('/oauth-apps', {
- name: 'admin-oauth-apps',
- async action() {
- await import('./views');
- return BlazeLayout.render('main', {
- center: 'oauthApps',
- pageTitle: t('OAuth_Applications'),
- });
- },
-});
-
-registerAdminRoute('/oauth-app/:id?', {
- name: 'admin-oauth-app',
- async action(params) {
- await import('./views');
- return BlazeLayout.render('main', {
- center: 'pageSettingsContainer',
- pageTitle: t('OAuth_Application'),
- pageTemplate: 'oauthApp',
- params,
- });
- },
-});
diff --git a/app/oauth2-server-config/client/admin/views/index.js b/app/oauth2-server-config/client/admin/views/index.js
deleted file mode 100644
index 071605a56b89..000000000000
--- a/app/oauth2-server-config/client/admin/views/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import './oauthApp.html';
-import './oauthApp';
-import './oauthApps.html';
-import './oauthApps';
diff --git a/app/oauth2-server-config/client/admin/views/oauthApp.html b/app/oauth2-server-config/client/admin/views/oauthApp.html
deleted file mode 100644
index 5bcab86d702b..000000000000
--- a/app/oauth2-server-config/client/admin/views/oauthApp.html
+++ /dev/null
@@ -1,72 +0,0 @@
-
-
-
diff --git a/app/oauth2-server-config/client/admin/views/oauthApp.js b/app/oauth2-server-config/client/admin/views/oauthApp.js
deleted file mode 100644
index fa866ba86a81..000000000000
--- a/app/oauth2-server-config/client/admin/views/oauthApp.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Meteor } from 'meteor/meteor';
-import { ReactiveVar } from 'meteor/reactive-var';
-import { FlowRouter } from 'meteor/kadira:flow-router';
-import { Template } from 'meteor/templating';
-import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
-import { Tracker } from 'meteor/tracker';
-import toastr from 'toastr';
-
-import { hasAllPermission } from '../../../../authorization';
-import { modal, SideNav } from '../../../../ui-utils/client';
-import { t, handleError } from '../../../../utils';
-import { APIClient } from '../../../../utils/client';
-
-Template.oauthApp.onCreated(async function() {
- const params = this.data.params();
- this.oauthApp = new ReactiveVar({});
- this.record = new ReactiveVar({
- active: true,
- });
- if (params && params.id) {
- const { oauthApp } = await APIClient.v1.get(`oauth-apps.get?appId=${ params.id }`);
- this.oauthApp.set(oauthApp);
- }
-});
-
-Template.oauthApp.helpers({
- hasPermission() {
- return hasAllPermission('manage-oauth-apps');
- },
- data() {
- const instance = Template.instance();
- if (typeof instance.data.params === 'function') {
- const params = instance.data.params();
- if (params && params.id) {
- const data = Template.instance().oauthApp.get();
- if (data) {
- data.authorization_url = Meteor.absoluteUrl('oauth/authorize');
- data.access_token_url = Meteor.absoluteUrl('oauth/token');
- if (Array.isArray(data.redirectUri)) {
- data.redirectUri = data.redirectUri.join('\n');
- }
-
- Template.instance().record.set(data);
- return data;
- }
- }
- }
- return Template.instance().record.curValue;
- },
-});
-
-Template.oauthApp.events({
- 'click .submit > .delete'() {
- const params = Template.instance().data.params();
- modal.open({
- title: t('Are_you_sure'),
- text: t('You_will_not_be_able_to_recover'),
- type: 'warning',
- showCancelButton: true,
- confirmButtonColor: '#DD6B55',
- confirmButtonText: t('Yes_delete_it'),
- cancelButtonText: t('Cancel'),
- closeOnConfirm: false,
- html: false,
- }, function() {
- Meteor.call('deleteOAuthApp', params.id, function() {
- modal.open({
- title: t('Deleted'),
- text: t('Your_entry_has_been_deleted'),
- type: 'success',
- timer: 1000,
- showConfirmButton: false,
- });
- FlowRouter.go('admin-oauth-apps');
- });
- });
- },
- 'click .submit > .save'() {
- const instance = Template.instance();
- const name = $('[name=name]').val().trim();
- const active = $('[name=active]:checked').val().trim() === '1';
- const redirectUri = $('[name=redirectUri]').val().trim();
- if (name === '') {
- return toastr.error(TAPi18n.__('The_application_name_is_required'));
- }
- if (redirectUri === '') {
- return toastr.error(TAPi18n.__('The_redirectUri_is_required'));
- }
- const app = {
- name,
- active,
- redirectUri,
- };
- if (typeof instance.data.params === 'function') {
- const params = instance.data.params();
- if (params && params.id) {
- return Meteor.call('updateOAuthApp', params.id, app, function(err) {
- if (err != null) {
- return handleError(err);
- }
- toastr.success(TAPi18n.__('Application_updated'));
- });
- }
- }
- Meteor.call('addOAuthApp', app, function(err, data) {
- if (err != null) {
- return handleError(err);
- }
- toastr.success(TAPi18n.__('Application_added'));
- FlowRouter.go('admin-oauth-app', { id: data._id });
- });
- },
-});
-
-Template.oauthApp.onRendered(() => {
- Tracker.afterFlush(() => {
- SideNav.setFlex('adminFlex');
- SideNav.openFlex();
- });
-});
diff --git a/app/oauth2-server-config/client/admin/views/oauthApps.html b/app/oauth2-server-config/client/admin/views/oauthApps.html
deleted file mode 100644
index 99a142127802..000000000000
--- a/app/oauth2-server-config/client/admin/views/oauthApps.html
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
- {{# header sectionName=pageTitle}}
-
- {{/header}}
-
- {{#if hasPermission}}
-
- {{else}}
- {{_ "Not_authorized"}}
- {{/if}}
-
-
diff --git a/app/oauth2-server-config/client/admin/views/oauthApps.js b/app/oauth2-server-config/client/admin/views/oauthApps.js
deleted file mode 100644
index 595af845a769..000000000000
--- a/app/oauth2-server-config/client/admin/views/oauthApps.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Template } from 'meteor/templating';
-import { Tracker } from 'meteor/tracker';
-import { ReactiveVar } from 'meteor/reactive-var';
-import moment from 'moment';
-
-import { hasAllPermission } from '../../../../authorization';
-import { SideNav } from '../../../../ui-utils/client';
-import { APIClient } from '../../../../utils/client';
-
-Template.oauthApps.onCreated(async function() {
- this.oauthApps = new ReactiveVar([]);
- const { oauthApps } = await APIClient.v1.get('oauth-apps.list');
- this.oauthApps.set(oauthApps);
-});
-
-Template.oauthApps.helpers({
- hasPermission() {
- return hasAllPermission('manage-oauth-apps');
- },
- applications() {
- return Template.instance().oauthApps.get();
- },
- dateFormated(date) {
- return moment(date).format('L LT');
- },
-});
-
-Template.oauthApps.onRendered(() => {
- Tracker.afterFlush(() => {
- SideNav.setFlex('adminFlex');
- SideNav.openFlex();
- });
-});
diff --git a/app/oauth2-server-config/client/index.js b/app/oauth2-server-config/client/index.js
index 917437a0b53a..5911484bf1c4 100644
--- a/app/oauth2-server-config/client/index.js
+++ b/app/oauth2-server-config/client/index.js
@@ -1,5 +1,4 @@
import './oauth/oauth2-client.html';
import './oauth/oauth2-client';
import './admin/startup';
-import './admin/route';
import './oauth/stylesheets/oauth2.css';
diff --git a/app/oauth2-server-config/client/oauth/oauth2-client.html b/app/oauth2-server-config/client/oauth/oauth2-client.html
index 49915dcf4738..917f44217918 100644
--- a/app/oauth2-server-config/client/oauth/oauth2-client.html
+++ b/app/oauth2-server-config/client/oauth/oauth2-client.html
@@ -30,9 +30,9 @@
{{currentUser.username}}
- {{_ "Logout"}}
- {{_ "Cancel"}}
- {{_ "Authorize"}}
+ {{_ "Logout"}}
+ {{_ "Cancel"}}
+ {{_ "Authorize"}}
{{#unless Template.subscriptionsReady}}
diff --git a/app/oembed/client/oembedUrlWidget.js b/app/oembed/client/oembedUrlWidget.js
index 66db81e25af7..4304c3db216b 100644
--- a/app/oembed/client/oembedUrlWidget.js
+++ b/app/oembed/client/oembedUrlWidget.js
@@ -50,11 +50,7 @@ Template.oembedUrlWidget.helpers({
if (url == null) {
return;
}
- if (url.indexOf('//') === 0) {
- url = `${ this.parsedUrl.protocol }${ url }`;
- } else if (url.indexOf('/') === 0 && (this.parsedUrl && this.parsedUrl.host)) {
- url = `${ this.parsedUrl.protocol }//${ this.parsedUrl.host }${ url }`;
- }
+ url = new URL(url, `${ this.parsedUrl.protocol }//${ this.parsedUrl.host }`).href;
return url;
},
show() {
diff --git a/app/otr/client/rocketchat.otr.room.js b/app/otr/client/rocketchat.otr.room.js
index fcb34184e376..08da47733d76 100644
--- a/app/otr/client/rocketchat.otr.room.js
+++ b/app/otr/client/rocketchat.otr.room.js
@@ -71,13 +71,9 @@ OTR.Room = class {
if (this.established.get()) {
if ($room.length && $title.length && !$('.otr-icon', $title).length) {
$title.prepend('
');
- $('.input-message-container').addClass('otr');
- $('.inner-right-toolbar').prepend('
');
}
} else if ($title.length) {
$('.otr-icon', $title).remove();
- $('.input-message-container').removeClass('otr');
- $('.inner-right-toolbar .otr-icon').remove();
}
});
diff --git a/app/otr/client/stylesheets/otr.css b/app/otr/client/stylesheets/otr.css
index 029972d1a1b5..2a44f16efe7c 100644
--- a/app/otr/client/stylesheets/otr.css
+++ b/app/otr/client/stylesheets/otr.css
@@ -27,21 +27,3 @@
}
}
}
-
-.input-message-container.otr {
- & .input-message {
- padding-right: 48px;
- }
-
- & .inner-right-toolbar {
- & .otr-icon {
- display: inline-block;
-
- margin-top: 2px;
-
- vertical-align: top;
-
- color: green;
- }
- }
-}
diff --git a/app/otr/client/views/otrFlexTab.html b/app/otr/client/views/otrFlexTab.html
index e394b43cba61..6357caf196a9 100644
--- a/app/otr/client/views/otrFlexTab.html
+++ b/app/otr/client/views/otrFlexTab.html
@@ -9,15 +9,15 @@
{{_ "Off_the_record_conversation"}}
{{#if userIsOnline}}
{{#if established}}
- {{_ "Refresh_keys"}} {{_ "Refresh_keys"}}
- {{_ "End_OTR"}} {{_ "End_OTR"}}
{{else}} {{#if establishing}}
{{_ "Please_wait_while_OTR_is_being_established"}}
{{else}}
-
{{_ "Start_OTR"}}
+
{{_ "Start_OTR"}}
{{/if}} {{/if}}
{{else}}
{{_ "OTR_is_only_available_when_both_users_are_online"}}
diff --git a/app/theme/client/imports/components/emojiPicker.css b/app/theme/client/imports/components/emojiPicker.css
index bd2d72a0b9c1..f8601a798a4c 100644
--- a/app/theme/client/imports/components/emojiPicker.css
+++ b/app/theme/client/imports/components/emojiPicker.css
@@ -122,6 +122,12 @@
font-size: 12px;
font-weight: 500;
+
+ & .add-custom {
+ display: inline-block;
+
+ width: 100%;
+ }
}
.emoji-top {
diff --git a/app/theme/client/imports/components/sidebar/sidebar.css b/app/theme/client/imports/components/sidebar/sidebar.css
index 6a273c8fa646..033835d8f094 100644
--- a/app/theme/client/imports/components/sidebar/sidebar.css
+++ b/app/theme/client/imports/components/sidebar/sidebar.css
@@ -64,7 +64,9 @@
}
& .unread-rooms {
- display: none;
+ padding: calc(var(--sidebar-small-default-padding) - 8px);
+
+ text-align: center;
}
}
diff --git a/app/theme/client/imports/general/base.css b/app/theme/client/imports/general/base.css
index 701478ff6849..e35353061bce 100644
--- a/app/theme/client/imports/general/base.css
+++ b/app/theme/client/imports/general/base.css
@@ -29,6 +29,7 @@ body {
background-color: var(--rc-color-primary);
+ font-family: var(--body-font-family);
font-size: var(--text-small-size);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/app/theme/client/imports/general/base_old.css b/app/theme/client/imports/general/base_old.css
index 62e89ad03fa2..d2b2ace62a9b 100644
--- a/app/theme/client/imports/general/base_old.css
+++ b/app/theme/client/imports/general/base_old.css
@@ -1,7 +1,3 @@
-.rc-old .text-right {
- text-align: right;
-}
-
.rc-old .no-scroll {
overflow: hidden !important;
}
@@ -180,18 +176,6 @@
display: none !important;
}
-.rc-old .scrollable {
- position: absolute;
- top: 0;
- left: 0;
-
- overflow-y: scroll;
-
- width: 100%;
- height: 100%;
- -webkit-overflow-scrolling: touch;
-}
-
.rc-old .page-container {
position: absolute;
top: 0;
@@ -249,33 +233,11 @@
}
}
- & .logoutOthers {
- text-align: right;
- }
-
& .submit {
margin-top: 20px;
text-align: right;
}
-
- &.request-password {
- margin: 0 auto;
-
- & fieldset {
- margin-top: 20px;
-
- & label {
- display: block;
-
- margin-top: 20px;
- }
- }
-
- & .submit {
- text-align: center;
- }
- }
}
}
}
@@ -383,38 +345,6 @@
}
}
-/* input & form styles */
-
-.rc-old :not(.rcx-input-control):focus {
- outline: none;
- box-shadow: 0 0 0;
-}
-
-/* .rc-old textarea, */
-
-/*
-rc-old select,
-.rc-old input[type='text'],
-.rc-old input[type='number'],
-.rc-old input[type='email'],
-.rc-old input[type='url'],
-.rc-old input[type='password'] {
- position: relative;
-
- width: 100%;
- height: 35px;
- padding: 2px 8px;
-
- border-width: 1px;
- border-style: solid;
- border-radius: 5px;
- outline: none;
-
- line-height: normal;
- appearance: none;
-}
-*/
-
.rc-old input {
& .input-forward {
visibility: hidden;
@@ -459,16 +389,6 @@ rc-old select,
position: relative;
}
-.rc-old .form-group .input-group {
- padding: 2px 0;
-}
-
-.rc-old .form-horizontal .control-label {
- padding-top: 12px;
-
- font-weight: bold;
-}
-
.rc-old .-autocomplete-container {
top: auto;
@@ -616,26 +536,6 @@ rc-old select,
flex-grow: 0;
}
-.rc-old .sec-header {
- margin: 16px 0;
-
- text-align: center;
-
- & > * {
- display: inline-table;
-
- width: auto;
-
- vertical-align: middle;
-
- line-height: 35px;
- }
-
- & label {
- margin-left: 20px;
- }
-}
-
.rc-old.burger {
display: none;
visibility: hidden;
@@ -817,10 +717,6 @@ rc-old select,
border-radius: var(--border-radius);
}
-
- & .avatar-initials {
- line-height: 44px;
- }
}
& .data {
@@ -1072,21 +968,8 @@ rc-old select,
direction: rtl;
-webkit-overflow-scrolling: touch;
- &.no-shadow {
- box-shadow: 0 0 0;
- }
-
& > .wrapper {
direction: ltr;
-
- & .flex-control {
- margin-bottom: 30px;
-
- & .search {
- width: 100%;
- margin-bottom: 10px;
- }
- }
}
& h4 {
@@ -1156,10 +1039,6 @@ rc-old select,
}
}
- & .input-submit {
- margin: 35px 0 0 -4px;
- }
-
& .selected-users {
padding: 20px 0 0;
@@ -1186,65 +1065,6 @@ rc-old select,
height: var(--toolbar-height);
}
-.rc-old .toolbar-wrapper {
- display: flex;
-
- margin: 10px 8px;
-}
-
-.rc-old .toolbar-search {
- position: relative;
-
- width: 100%;
-}
-
-.rc-old .toolbar-search__icon {
- position: absolute;
- top: 0;
- left: 0;
-
- width: 35px;
-
- text-align: center;
-
- line-height: 35px;
-}
-
-.rc-old .toolbar-search__icon--cancel {
- right: 0;
- left: auto;
-
- cursor: pointer;
- transition: opacity 0.3s;
-
- opacity: 0;
-}
-
-.rc-old .toolbar-search__input {
- padding: 6px 35px !important;
-
- &:focus + .toolbar-search__icon--cancel {
- opacity: 1;
- }
-}
-
-.rc-old .toolbar-search__buttons {
- display: flex;
-
- margin-left: 5px;
- align-items: center;
-
- & i {
- width: 25px;
- height: 25px;
-
- cursor: pointer;
- text-align: center;
-
- line-height: 25px;
- }
-}
-
.rc-old .new-room-highlight a {
animation: highlight 6s infinite;
}
@@ -1342,11 +1162,20 @@ rc-old select,
text-align: center;
color: var(--rc-color-content);
+ background-color: var(--primary-background-color);
font-size: 1.2em;
line-height: 40px;
flex-flow: row nowrap;
+ &.warning {
+ background-color: var(--rc-color-alert);
+ }
+
+ &.error {
+ background-color: var(--rc-color-alert-message-warning);
+ }
+
& ~ .container-bars {
top: 45px;
}
@@ -1400,16 +1229,6 @@ rc-old select,
/* MAIN CONTENT + MAIN PAGES */
-.rc-old.main-content {
- & .container-fluid {
- padding-top: 0;
- }
-
- & .history-date {
- margin-bottom: 20px;
- }
-}
-
.rc-old .page-settings {
& .content {
& h2 {
@@ -1544,12 +1363,6 @@ rc-old select,
line-height: 1.2rem;
}
- & .color-editor {
- position: relative;
-
- width: 150px;
- }
-
& .selected-rooms .remove-room {
cursor: pointer;
}
@@ -1746,12 +1559,6 @@ rc-old select,
margin-bottom: 5px;
}
}
-
- & .user-image {
- float: right;
-
- margin-left: 12px;
- }
}
}
@@ -1970,14 +1777,6 @@ rc-old select,
width: 50%;
}
- & .room-topic {
- margin-left: 10px;
-
- opacity: 0.4;
-
- font-size: 14px;
- }
-
& .wrapper {
position: absolute;
top: 0;
@@ -1997,287 +1796,11 @@ rc-old select,
flex-shrink: 0;
}
- & .message-form {
- margin-bottom: 18px;
-
- & > .message-input {
- position: relative;
-
- display: flex;
- overflow: hidden;
-
- border-width: 1px;
- border-radius: 5px;
-
- & > .share-items {
- position: relative;
-
- display: flex;
-
- & input {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- overflow: hidden;
-
- cursor: pointer;
-
- opacity: 0;
-
- &::-webkit-file-upload-button {
- cursor: pointer;
- }
- }
-
- & i {
- font-size: 18px;
- }
-
- & > .message-buttons {
- position: relative;
-
- display: flex;
- overflow: hidden;
-
- width: 35px;
- height: 35px;
-
- cursor: pointer;
- text-align: center;
-
- border: 0;
- align-items: center;
- justify-content: center;
-
- & input {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- overflow: hidden;
-
- cursor: pointer;
-
- opacity: 0;
-
- &::-webkit-file-upload-button {
- cursor: pointer;
- }
- }
-
- & i {
- font-size: 18px;
- }
- }
- }
-
- & .input-message-container {
- position: relative;
-
- width: 100%;
-
- & .inner-left-toolbar {
- position: absolute;
- top: 8px;
- left: 13px;
- }
- }
-
- & > .message-buttons {
- position: relative;
-
- display: flex;
- flex: 0 0 35px;
-
- cursor: pointer;
- transition: background-color 0.1s linear, color 0.1s linear;
- text-align: center;
-
- border: 0;
- align-items: center;
- justify-content: center;
-
- & i {
- transition: transform 0.3s ease-out;
- transform: rotate(0deg);
-
- font-size: 18px;
- }
-
- & input {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
-
- overflow: hidden;
-
- width: 100%;
-
- cursor: pointer;
-
- opacity: 0;
-
- &::-webkit-file-upload-button {
- cursor: pointer;
- }
- }
- }
- }
-
- & textarea {
- display: block;
- overflow-y: auto;
-
- max-height: 155px;
- margin: 0;
- padding-top: 9px;
- padding-bottom: 9px;
- padding-left: 49px;
-
- resize: none;
-
- border-width: 0 1px 0 0;
- border-radius: 0;
-
- line-height: 16px;
- }
-
- & .users-typing {
- position: relative;
-
- display: inline-block;
- float: left;
- overflow: hidden;
-
- max-width: 100%;
- height: 23px;
- padding: 3px;
-
- white-space: nowrap;
- text-overflow: ellipsis;
-
- background-color: var(--color-white);
-
- font-size: 12px;
- }
-
- & .formatting-tips {
- display: flex;
- float: right;
- overflow: hidden;
-
- height: 25px;
- padding: 3px;
-
- transition: opacity 0.2s linear;
- white-space: nowrap;
-
- opacity: 0.5;
-
- font-size: 11px;
- align-items: center;
-
- & > * {
- margin: 0 3px;
- }
-
- &:hover {
- opacity: 1;
- }
-
- & q {
- padding: 0 0 0 3px;
-
- border-width: 0 0 0 3px;
-
- &::before {
- content: none !important;
- }
- }
-
- & code {
- overflow: hidden;
-
- vertical-align: top;
- white-space: nowrap;
-
- font-size: 10px;
- line-height: 13px;
- }
-
- & .hidden-br {
- display: inline-block;
- }
-
- & .icon-level-down::before {
- transform: rotate(90deg);
- }
- }
-
- & .editing-commands {
- display: none;
-
- text-transform: lowercase;
-
- & .editing-commands-cancel {
- float: left;
-
- height: 23px;
- padding: 3px;
-
- font-size: 11px;
- }
-
- & .editing-commands-save {
- float: right;
-
- height: 23px;
- padding: 3px;
-
- font-size: 11px;
- }
- }
-
- &.editing {
- & .formatting-tips,
- & .users-typing {
- display: none;
- }
-
- & .editing-commands {
- display: block;
- }
- }
- }
-
- & .add-user-search {
- display: inline-block;
- overflow: hidden;
-
- width: 100%;
- height: 100%;
-
- vertical-align: top;
- }
-
&.admin {
& .message:hover:not(.system) .message-action {
display: inline-block;
}
}
-
- & .secondary-name {
- color: #666666;
-
- font-size: 15px;
- }
}
.rc-old .message-popup-position {
@@ -2377,80 +1900,26 @@ rc-old select,
}
.rc-message-box__icon.cancel-reply .rc-input__icon-svg--cross {
- font-size: 1em;
-}
-
-.rc-old .message-popup.popup-with-reply-preview {
- border-radius: 5px 5px 0 0;
-}
-
-.rc-old .message-popup {
- position: absolute;
- z-index: 101;
- right: 0;
- bottom: 0;
- left: 0;
-
- overflow: hidden;
-
- border-radius: 5px;
- box-shadow:
- 0 -1px 10px 0 rgba(0, 0, 0, 0.2),
- 0 1px 1px rgba(0, 0, 0, 0.16);
-
- &.popup-down {
- top: 0;
- bottom: auto;
- }
-
- &.search-results-list {
- top: 0;
-
- overflow-y: auto;
-
- height: calc(100vh - calc(var(--header-min-height) + calc(var(--toolbar-height) + var(--footer-min-height))));
- padding: 25px 0 0 8px;
-
- text-align: left;
-
- border-radius: 0;
- box-shadow: none;
- direction: rtl;
-
- & .popup-item {
- position: relative;
-
- overflow: hidden;
-
- height: 30px;
- padding-left: 6px;
-
- white-space: nowrap;
- text-overflow: ellipsis;
- direction: ltr;
-
- & i::before {
- margin-right: 0;
- }
- }
+ font-size: 1em;
+}
- & .room-title {
- font-size: 15px;
- line-height: 30px;
- }
+.rc-old .message-popup.popup-with-reply-preview {
+ border-radius: 5px 5px 0 0;
+}
- & .bold {
- font-weight: 700;
- }
+.rc-old .message-popup {
+ position: absolute;
+ z-index: 101;
+ right: 0;
+ bottom: 0;
+ left: 0;
- & .unread {
- top: 8px;
- }
+ overflow: hidden;
- & .loading-animation {
- position: relative;
- }
- }
+ border-radius: 5px;
+ box-shadow:
+ 0 -1px 10px 0 rgba(0, 0, 0, 0.2),
+ 0 1px 1px rgba(0, 0, 0, 0.16);
}
.rc-old .message-popup-title {
@@ -2657,6 +2126,9 @@ rc-old select,
}
& .time {
+ padding-right: 2px;
+ padding-left: 2px;
+
white-space: nowrap;
}
@@ -2802,6 +2274,10 @@ rc-old select,
display: none;
}
+ .message-custom-status {
+ display: none;
+ }
+
& .title {
position: absolute;
left: 5px;
@@ -2844,10 +2320,6 @@ rc-old select,
}
}
- & .avatar-initials {
- line-height: 40px;
- }
-
& .body {
transition: opacity 0.3s linear;
@@ -2928,6 +2400,7 @@ rc-old select,
}
& .message-alias {
+ padding-right: 2px;
padding-left: 2px;
font-weight: 400;
@@ -3305,36 +2778,6 @@ rc-old select,
}
}
}
-
- /*
- & .close-flex-tab {
- position: absolute;
- z-index: 20;
- top: 3px;
- right: 5px;
-
- width: 30px;
- height: 30px;
-
- text-align: center;
-
- & span {
- display: inline-block;
-
- width: 21px;
- height: 20px;
-
- & i {
- display: inline-block;
-
- width: 18px;
- height: 18px;
-
- font-size: 10px;
- }
- }
- }
- */
}
& .flex-tab-bar {
@@ -3615,12 +3058,6 @@ rc-old select,
}
}
- & .contact-code {
- margin: -5px 0 10px;
-
- font-size: 12px;
- }
-
& .channels {
& h3 {
margin-bottom: 8px;
@@ -3669,10 +3106,6 @@ rc-old select,
}
}
}
-
- & .room-info-content > div {
- margin: 0 0 20px;
- }
}
.rc-old .edit-form {
@@ -3725,156 +3158,6 @@ rc-old select,
}
}
-.rc-old .user-image {
- position: relative;
-
- display: inline-block;
-
- width: var(--user-image-square);
- height: var(--user-image-square);
- margin: 4px;
-
- cursor: pointer;
-
- font-size: 12px;
-
- &:hover,
- &.selected .avatar::after {
- transform: scaleX(1);
- }
-
- & .avatar {
- overflow: visible;
-
- &::before {
- font-size: 10px;
- }
-
- &::after {
- position: absolute;
- z-index: 1;
- top: 8px;
- left: -12px;
-
- width: 6px;
- height: 6px;
-
- content: " ";
-
- border-radius: 3px;
- }
-
- & .avatar-initials {
- line-height: var(--user-image-square);
- }
- }
-
- & p {
- display: none;
- }
-
- & button {
- display: block;
-
- width: 100%;
- height: 100%;
- }
-}
-
-.rc-old .lines .user-image {
- width: 100%;
- margin: 0;
-
- &::after {
- display: none;
- }
-
- & button {
- display: block;
- clear: both;
-
- height: 30px;
- padding: 5px 0;
-
- &::after {
- display: table;
- clear: both;
-
- content: "";
- }
-
- & > div {
- float: left;
-
- width: var(--user-image-square);
- height: var(--user-image-square);
-
- margin-left: 1rem;
- }
- }
-
- & p {
- position: relative;
-
- display: block;
- float: left;
- overflow: hidden;
-
- width: calc(100% - 45px);
- padding-left: 10px;
-
- text-overflow: ellipsis;
-
- font-size: 15px;
- font-weight: 400;
- line-height: var(--user-image-square);
- }
-}
-
-.rc-old .user-profile {
- overflow: hidden;
-
- white-space: normal;
-
- & .thumb {
- float: left;
-
- width: 75px;
-
- & img {
- width: 60px;
- height: 60px;
- }
- }
-
- & .info {
- display: block;
-
- margin-left: 75px;
-
- & h3 {
- margin-bottom: 8px;
-
- font-size: 14px;
- font-weight: 600;
- }
-
- & p {
- margin-bottom: 6px;
-
- font-size: 12px;
- }
-
- & a:hover {
- text-decoration: none;
- }
- }
-}
-
-.rc-old .profile-buttons {
- margin-top: 1em;
-}
-
.rc-old .avatarPrompt {
& header p {
font-size: 14px;
@@ -3887,14 +3170,6 @@ rc-old select,
}
}
-.rc-old .select-arrow {
- position: absolute;
- right: 4px;
- bottom: 11px;
-
- color: #a9a9a9;
-}
-
.rc-old #login-card {
position: relative;
z-index: 1;
@@ -4226,15 +3501,6 @@ rc-old select,
}
}
-.rc-old #particles-js {
- position: fixed;
- top: 0;
- left: 0;
-
- width: 100%;
- height: 100%;
-}
-
.rc-old .highlight-text {
padding: 2px;
@@ -4339,36 +3605,6 @@ rc-old select,
}
}
-.rc-old .rocket-team {
- display: block;
-
- & li {
- display: inline-block;
- }
-
- & a {
- display: inline-block;
-
- width: 50px;
- height: 50px;
- margin-right: 5px;
-
- border-radius: 50%;
- background-position: 50% 50%;
- background-size: 100%;
- }
-}
-
-.rc-old #fullscreendiv:-webkit-full-screen {
- position: fixed;
- top: 0;
-
- width: 100%;
- height: 100%;
-
- background: none;
-}
-
.rc-old .dropzone {
& .dropzone-overlay {
@@ -4422,25 +3658,6 @@ rc-old select,
}
}
-.zoomIn {
- -webkit-animation-name: zoomIn;
- animation-name: zoomIn;
-}
-
-.rc-old .is-cordova {
- & .flex-tab {
- & .control {
- padding-left: 50px;
- }
-
- & button.more {
- width: 60px;
-
- transform: translateX(-57px);
- }
- }
-}
-
.rc-old .touch .footer {
padding-right: 10px;
padding-left: 10px;
@@ -4602,24 +3819,6 @@ rc-old select,
font-size: 80px;
}
-.rc-old .colorpicker-input {
- text-indent: 34px;
-}
-
-.rc-old .colorpicker-swatch {
- position: absolute;
- top: 4px;
- left: 4px;
-
- display: block;
- overflow: hidden;
-
- width: 32px;
- height: 32px;
-
- border-radius: 2px;
-}
-
.rc-old .inline-video {
width: 100%;
max-width: 480px;
@@ -4777,10 +3976,6 @@ rc-old select,
}
}
-.sweet-alert .sa-input-error {
- top: 19px;
-}
-
.rc-old .collapse-switch {
cursor: pointer;
}
@@ -4872,14 +4067,6 @@ rc-old select,
min-height: 36px;
padding: 0;
- & .message-form {
- margin-bottom: 0;
- }
-
- & .message-input {
- border-width: 0;
- }
-
& .users-typing {
display: none;
}
@@ -4914,10 +4101,6 @@ rc-old select,
.rc-old.main-content {
transform: translateX(0) !important;
}
-
- .sweet-alert {
- margin-left: -239px !important;
- }
}
@media (width <= 780px) {
@@ -4941,20 +4124,6 @@ rc-old select,
}
}
- .rc-old .sweet-alert {
- & h2 {
- margin: 10px 0;
-
- font-size: 20px;
- line-height: 30px;
- }
-
- & button {
- margin-top: 6px;
- padding: 10px 22px;
- }
- }
-
.rc-old .code-mirror-box.code-mirror-box-fullscreen {
left: 0;
}
@@ -4981,10 +4150,6 @@ rc-old select,
}
@media (width <= 500px) {
- .rc-old .messages-container .message-form > .formatting-tips {
- display: none;
- }
-
.cms-page {
padding: 0;
@@ -5016,10 +4181,6 @@ rc-old select,
.rc-old .oauth-login {
margin-bottom: 6px;
}
-
- .rc-old .message-form textarea {
- max-height: 100px !important;
- }
}
@media (width <= 440px) {
@@ -5040,12 +4201,6 @@ rc-old select,
}
}
-@media (height <= 260px) {
- .rc-old .message-form textarea {
- max-height: 50px !important;
- }
-}
-
.room-leader .chat-now {
position: absolute;
right: 25px;
diff --git a/app/theme/client/imports/general/forms.css b/app/theme/client/imports/general/forms.css
index ba214e96548a..9516f91a2072 100644
--- a/app/theme/client/imports/general/forms.css
+++ b/app/theme/client/imports/general/forms.css
@@ -1,63 +1,4 @@
.input {
- &.radio {
- position: relative;
-
- min-height: 13px;
-
- & input {
- position: absolute;
- z-index: -1;
- top: 0;
- left: 0;
-
- width: 0;
- height: 0;
-
- opacity: 0;
- outline: 0;
-
- &:checked + label::after {
- opacity: 1;
- }
- }
-
- & label {
- padding-left: 20px;
-
- cursor: pointer;
- user-select: none;
-
- &::before {
- position: absolute;
- top: 0;
- left: 0;
-
- width: 15px;
- height: 15px;
-
- content: '';
-
- border-width: 1px;
- border-radius: 50%;
- }
-
- &::after {
- position: absolute;
- top: 4px;
- left: 4px;
-
- width: 7px;
- height: 7px;
-
- content: '';
- transition: opacity 0.2s ease-out;
-
- opacity: 0;
- border-radius: 50%;
- }
- }
- }
-
&.checkbox.toggle {
position: relative;
diff --git a/app/theme/client/imports/general/rtl.css b/app/theme/client/imports/general/rtl.css
index 2be992c93dbe..dc230d84010d 100644
--- a/app/theme/client/imports/general/rtl.css
+++ b/app/theme/client/imports/general/rtl.css
@@ -18,10 +18,6 @@
text-align: right;
}
- & .text-right {
- text-align: left;
- }
-
& .main-content {
left: 0;
@@ -102,37 +98,6 @@
right: 0;
left: auto;
}
-
- & .message-form {
- & > div .input-message-container .inner-left-toolbar {
- right: 13px;
- left: auto;
- }
-
- & textarea {
- padding-right: 49px;
- padding-left: 8px;
-
- text-align: right;
-
- border-width: 0 0 0 1px;
- border-right-width: 0;
- }
-
- & > .formatting-tips {
- position: relative;
- right: auto;
-
- float: left;
-
- & q {
- padding: 0 3px 0 0;
-
- border-right: 3px solid;
- border-left: 0 none;
- }
- }
- }
}
& .account-box .options {
@@ -250,24 +215,6 @@
}
}
- & .user-image .avatar::after {
- right: -12px;
- left: auto;
- }
-
- & .lines .user-image {
- & button > div {
- float: right;
- }
-
- & p {
- float: right;
-
- padding-right: 10px;
- padding-left: auto;
- }
- }
-
& .user-view {
& nav {
margin-right: -4px;
@@ -454,13 +401,6 @@
margin-left: auto;
}
- & .user-image {
- float: left;
-
- margin-right: 12px;
- margin-left: auto;
- }
-
& table thead th {
text-align: right;
}
@@ -490,10 +430,6 @@
right: 0;
}
- & .logoutOthers {
- text-align: left;
- }
-
& .submit {
text-align: left;
}
@@ -505,26 +441,6 @@
left: 12px;
}
- & .toolbar-search__icon {
- right: 0;
- }
-
- & .toolbar-search__icon--cancel {
- right: auto;
- left: 0;
- }
-
- & .message-popup.search-results-list {
- padding: 25px 8px 0 0;
-
- text-align: right;
- direction: ltr;
-
- & .popup-item {
- direction: rtl;
- }
- }
-
@media (width <= 1100px) {
& #rocket-chat .flex-opened {
left: 0;
diff --git a/app/theme/client/imports/general/theme_old.css b/app/theme/client/imports/general/theme_old.css
new file mode 100644
index 000000000000..657ebb4f3c41
--- /dev/null
+++ b/app/theme/client/imports/general/theme_old.css
@@ -0,0 +1,557 @@
+.content-background-color {
+ background-color: var(--content-background-color);
+}
+
+.color-content-background-color {
+ color: var(--content-background-color);
+}
+
+.primary-background-color {
+ background-color: var(--primary-background-color);
+}
+
+.color-primary-font-color {
+ color: var(--primary-font-color);
+}
+
+.color-primary-action-color {
+ color: var(--primary-action-color);
+}
+
+.background-primary-action-color {
+ background-color: var(--primary-action-color);
+}
+
+.secondary-background-color {
+ background-color: var(--secondary-background-color);
+}
+
+.border-secondary-background-color {
+ border-color: var(--secondary-background-color);
+}
+
+.secondary-font-color {
+ color: var(--secondary-font-color);
+}
+
+.border-component-color {
+ border-color: var(--component-color);
+}
+
+.background-component-color {
+ background-color: var(--component-color);
+}
+
+.color-component-color {
+ color: var(--component-color);
+}
+
+.success-color {
+ color: var(--success-color);
+}
+
+.pending-color {
+ color: var(--pending-color);
+}
+
+.pending-background {
+ background-color: var(--pending-background);
+}
+
+.pending-border {
+ border-color: var(--pending-border);
+}
+
+.error-color {
+ color: var(--error-color);
+}
+
+.background-error-color {
+ background-color: var(--error-color);
+}
+
+.color-info-font-color {
+ color: var(--info-font-color);
+}
+
+.background-info-font-color {
+ background-color: var(--info-font-color);
+}
+
+.background-attention-color {
+ background-color: var(--attention-color);
+}
+
+.tertiary-background-color {
+ background-color: var(--tertiary-background-color);
+}
+
+.border-tertiary-background-color {
+ border-color: var(--tertiary-background-color);
+}
+
+.color-tertiary-font-color {
+ color: var(--tertiary-font-color);
+}
+
+.error-background {
+ background-color: var(--error-background);
+}
+
+.error-border {
+ border-color: var(--error-border);
+}
+
+.color-error-contrast {
+ color: var(--error-contrast);
+}
+
+.background-transparent-darkest {
+ background-color: var(--transparent-darkest);
+}
+
+.background-transparent-darker {
+ background-color: var(--transparent-darker);
+}
+
+.background-transparent-darker-hover:hover {
+ background-color: var(--transparent-darker);
+}
+
+.background-transparent-darker-before::before {
+ background-color: var(--transparent-darker);
+}
+
+.background-transparent-dark {
+ background-color: var(--transparent-dark);
+}
+
+.background-transparent-dark-hover:hover {
+ background-color: var(--transparent-dark);
+}
+
+.border-transparent-dark {
+ border-color: var(--transparent-dark);
+}
+
+.background-transparent-light {
+ background-color: var(--transparent-light);
+}
+
+.border-transparent-lighter {
+ border-color: var(--transparent-lighter);
+}
+
+.background-transparent-lightest {
+ background-color: var(--transparent-lightest);
+}
+
+.color-primary-action-contrast {
+ color: var(--primary-action-contrast);
+}
+
+* {
+ -webkit-overflow-scrolling: touch;
+
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+
+ background: var(--transparent-dark);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 50px;
+ background-color: var(--custom-scrollbar-color);
+ }
+
+ &::-webkit-scrollbar-corner {
+ background-color: var(--transparent-dark);
+ }
+}
+
+.filter-item {
+ &:hover {
+ border-color: var(--info-font-color);
+ }
+
+ &.active {
+ border-color: var(--primary-background-color);
+ }
+}
+
+.burger i {
+ background-color: var(--primary-font-color);
+}
+
+.input-line {
+ &.setting-changed > label {
+ color: var(--selection-color);
+ }
+}
+
+input:-webkit-autofill {
+ color: var(--primary-font-color) !important;
+ background-color: transparent !important;
+}
+
+input,
+select,
+textarea {
+ color: var(--primary-font-color);
+ border-style: solid;
+ border-color: var(--input-border-color);
+ background-color: transparent;
+
+ &::placeholder {
+ color: var(--input-placeholder-color);
+ }
+
+ &[disabled] {
+ background-color: var(--button-disabled-background);
+ }
+}
+
+.disabled label,
+[disabled] label {
+ color: var(--input-placeholder-color);
+}
+
+.-autocomplete-container {
+ background-color: var(--popup-list-background);
+}
+
+.-autocomplete-item.selected {
+ background-color: var(--popup-list-selected-background);
+}
+
+.rc-old input[type="button"],
+.rc-old input[type="submit"] {
+ color: var(--button-secondary-text-color);
+ border-color: var(--button-secondary-background);
+ background: var(--button-secondary-background);
+}
+
+.input {
+ &.checkbox.toggle {
+ input:checked + label::before {
+ background-color: var(--button-primary-background);
+ }
+
+ input:disabled + label::before {
+ background-color: var(--button-disabled-background) !important;
+ }
+
+ label {
+ &::before {
+ background-color: var(--button-secondary-background);
+ }
+
+ &::after {
+ background-color: var(--button-primary-text-color);
+ }
+
+ &:hover {
+ &::before {
+ opacity: 0.6;
+ }
+ }
+ }
+ }
+}
+
+.message,
+.flex-tab {
+ a i,
+ a[class^="icon-"] {
+ color: var(--primary-font-color);
+
+ &:hover {
+ opacity: 0.6;
+ }
+ }
+}
+
+.error {
+ border-color: var(--error-color);
+}
+
+.page-list,
+.page-settings {
+ a:not(.rc-button) {
+ color: var(--primary-font-color);
+
+ &:hover {
+ color: var(--primary-action-color);
+ }
+ }
+}
+
+.admin-table-row {
+ background-color: var(--transparent-light);
+
+ &:nth-of-type(even) {
+ background-color: var(--transparent-lightest);
+ }
+}
+
+.avatar-suggestion-item {
+ .question-mark::before {
+ color: var(--secondary-font-color);
+ }
+}
+
+.full-page,
+.page-loading {
+ a {
+ color: var(--tertiary-font-color);
+ }
+
+ a:hover {
+ color: var(--primary-background-contrast);
+ }
+}
+
+#login-card {
+ .input-text {
+ input:-webkit-autofill {
+ box-shadow: 0 0 0 20px var(--content-background-color) inset;
+ }
+ }
+}
+
+.toggle-favorite {
+ color: var(--component-color);
+}
+
+.upload-progress-progress {
+ background-color: var(--success-background);
+}
+
+.messages-container {
+ .footer {
+ background: var(--content-background-color);
+ }
+}
+
+.message.editing {
+ background-color: var(--message-box-editing-color);
+}
+
+.rc-old {
+ & .popup-item {
+ &.selected {
+ color: var(--primary-action-contrast);
+ background-color: var(--primary-action-color);
+ }
+ }
+}
+
+.messages-box {
+ &.selectable .selected {
+ background-color: var(--selection-background);
+ }
+}
+
+.message {
+ &.new-day::before {
+ background-color: var(--content-background-color);
+ }
+
+ &.new-day::after {
+ border-color: var(--component-color);
+ }
+
+ a {
+ color: var(--link-font-color);
+
+ &:hover {
+ opacity: 0.6;
+ }
+ }
+
+ .highlight-text {
+ background-color: var(--selection-background);
+ }
+}
+
+.sidebar-item__last-message {
+ a:not(.mention-link) {
+ color: var(--link-font-color);
+
+ &:hover {
+ opacity: 0.6;
+ }
+ }
+}
+
+.flex-tab-bar {
+ .tab-button {
+ &:hover {
+ background-color: var(--secondary-background-color);
+ }
+
+ &.active {
+ border-right-color: var(--selection-color);
+ background-color: var(--secondary-background-color);
+ }
+
+ &.attention {
+ animation-name: blink;
+ animation-duration: 1000ms;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
+ }
+ }
+
+ .counter {
+ color: white;
+ background: var(--secondary-font-color);
+ }
+}
+
+i.status-online {
+ color: var(--status-online);
+}
+
+.status-bg-online {
+ background-color: var(--status-online);
+}
+
+.account-box .status-online .thumb::after,
+.account-box .status.online::after,
+.popup-user-status-online,
+.status-online::after {
+ border-color: var(--status-online-darken-10);
+ background-color: var(--status-online);
+}
+
+.account-box .status-offline .thumb::after,
+.account-box .status.offline::after {
+ background-color: var(--transparent-lighter);
+}
+
+i.status-away {
+ color: var(--status-away);
+}
+
+.status-bg-away {
+ background-color: var(--status-away);
+}
+
+.account-box .status-away .thumb::after,
+.account-box .status.away::after,
+.popup-user-status-away,
+.status-away::after,
+.status-pending::after {
+ border-color: var(--status-away-darken-10);
+ background-color: var(--status-away);
+}
+
+i.status-busy {
+ color: var(--status-busy);
+}
+
+.status-bg-busy {
+ background-color: var(--status-busy);
+}
+
+.account-box .status-busy .thumb::after,
+.account-box .status.busy::after,
+.popup-user-status-busy,
+.status-busy::after {
+ border-color: var(--status-busy-darken-10);
+ background-color: var(--status-busy);
+}
+
+i.status-offline {
+ color: var(--status-offline);
+}
+
+.status-bg-offline {
+ background-color: var(--status-offline);
+}
+
+.popup-user-status-offline,
+.status-offline::after {
+ border-color: var(--status-offline-darken-10);
+ background-color: var(--status-offline);
+}
+
+.alert-warning {
+ color: var(--primary-font-color);
+ border-color: var(--rc-color-alert);
+ background-color: var(--message-box-editing-color);
+}
+
+.alert-link {
+ color: var(--link-font-color);
+
+ &:hover {
+ opacity: 0.6;
+ }
+}
+
+label.required::after {
+ color: var(--error-color);
+}
+
+.main-content,
+.flex-tab {
+ .loading-animation > .bounce {
+ background-color: var(--primary-font-color);
+ }
+}
+
+.loading-animation.loading-animation--primary > .bounce {
+ background-color: var(--primary-font-color);
+}
+
+@keyframes blink {
+ from {
+ color: var(--selection-color);
+ }
+
+ to {
+ opacity: inherit;
+ }
+}
+
+.range-slider-range::-webkit-slider-thumb {
+ background-color: var(--button-primary-background);
+}
+
+.range-slider-range::-webkit-slider-thumb:hover {
+ opacity: 0.6;
+}
+
+.range-slider-range:active::-webkit-slider-thumb {
+ opacity: 0.9;
+}
+
+.range-slider-range::-moz-range-thumb {
+ background-color: var(--button-primary-background);
+}
+
+.range-slider-range::-moz-range-thumb:hover {
+ opacity: 0.6;
+}
+
+.range-slider-range:active::-moz-range-thumb {
+ opacity: 0.9;
+}
+
+.range-slider-range::-moz-range-track {
+ background-color: var(--tertiary-background-color);
+}
+
+.range-slider-value {
+ color: var(--button-primary-text-color);
+ background-color: var(--button-primary-background);
+}
+
+.range-slider-value::after {
+ border-top-color: transparent;
+ border-right-color: var(--rc-color-button-primary);
+ border-bottom-color: transparent;
+}
diff --git a/app/theme/client/imports/general/variables.css b/app/theme/client/imports/general/variables.css
index 2cfb61fd812f..01325d295175 100644
--- a/app/theme/client/imports/general/variables.css
+++ b/app/theme/client/imports/general/variables.css
@@ -1,4 +1,66 @@
:root {
+ /* #region colors Colors */
+ --rc-color-error: var(--color-red);
+ --rc-color-error-light: #e1364c;
+ --rc-color-alert: var(--color-yellow);
+ --rc-color-alert-light: var(--color-dark-yellow);
+ --rc-color-success: var(--color-green);
+ --rc-color-success-light: #25d198;
+ --rc-color-button-primary: var(--color-blue);
+ --rc-color-button-primary-light: var(--color-dark-blue);
+ --rc-color-alert-message-primary: var(--color-blue);
+ --rc-color-alert-message-primary-background: #f1f6ff;
+ --rc-color-alert-message-secondary: #7ca52b;
+ --rc-color-alert-message-secondary-background: #fafff1;
+ --rc-color-alert-message-warning: #d52d24;
+ --rc-color-alert-message-warning-background: #fff3f3;
+ --rc-color-primary: var(--color-dark);
+ --rc-color-primary-background: var(--color-dark);
+ --rc-color-primary-darkest: var(--color-darkest);
+ --rc-color-primary-dark: var(--color-dark-medium);
+ --rc-color-primary-light: var(--color-gray);
+ --rc-color-primary-light-medium: var(--color-gray-medium);
+ --rc-color-primary-lightest: var(--color-gray-lightest);
+ --rc-color-content: var(--color-white);
+ --rc-color-link-active: var(--rc-color-button-primary);
+
+ /* #endregion */
+
+ /* #region colors Old Colors */
+ --content-background-color: #ffffff;
+ --primary-background-color: #04436a;
+ --primary-font-color: #444444;
+ --primary-action-color: #1d74f5;
+ --secondary-background-color: #f4f4f4;
+ --secondary-font-color: #a0a0a0;
+ --secondary-action-color: #dddddd;
+ --component-color: #f2f3f5;
+ --success-color: #4dff4d;
+ --pending-color: #fcb316;
+ --error-color: #bc2031;
+ --selection-color: #02acec;
+ --attention-color: #9c27b0;
+
+ /* #endregion */
+
+ /* #region less-colors Old Colors (minor) */
+ --tertiary-background-color: var(--component-color);
+ --tertiary-font-color: var(--transparent-lightest);
+ --link-font-color: var(--primary-action-color);
+ --info-font-color: var(--secondary-font-color);
+ --custom-scrollbar-color: var(--transparent-darker);
+ --status-online: var(--success-color);
+ --status-away: var(--pending-color);
+ --status-busy: var(--error-color);
+ --status-offline: var(--transparent-darker);
+
+ /* #endregion */
+
+ /* #region fonts Fonts */
+ --body-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Meiryo UI', Arial, sans-serif;
+
+ /* #endregion */
+
/*
* Color palette
*/
@@ -36,29 +98,6 @@
--color-gray-lightest: #f2f3f5;
--color-black: #000000;
--color-white: #ffffff;
- --rc-color-error: var(--color-red);
- --rc-color-error-light: #e1364c;
- --rc-color-alert: var(--color-yellow);
- --rc-color-alert-light: var(--color-dark-yellow);
- --rc-color-success: var(--color-green);
- --rc-color-success-light: #25d198;
- --rc-color-button-primary: var(--color-blue);
- --rc-color-button-primary-light: var(--color-dark-blue);
- --rc-color-alert-message-primary: var(--color-blue);
- --rc-color-alert-message-primary-background: #f1f6ff;
- --rc-color-alert-message-secondary: #7ca52b;
- --rc-color-alert-message-secondary-background: #fafff1;
- --rc-color-alert-message-warning: #d52d24;
- --rc-color-alert-message-warning-background: #fff3f3;
- --rc-color-primary: var(--color-dark);
- --rc-color-primary-background: var(--color-dark);
- --rc-color-primary-darkest: var(--color-darkest);
- --rc-color-primary-dark: var(--color-dark-medium);
- --rc-color-primary-light: var(--color-gray);
- --rc-color-primary-light-medium: var(--color-gray-medium);
- --rc-color-primary-lightest: var(--color-gray-lightest);
- --rc-color-content: var(--color-white);
- --rc-color-link-active: var(--rc-color-button-primary);
/*
* General
@@ -71,7 +110,6 @@
--flex-tab-width: 400px;
--flex-tab-webrtc-width: 400px;
--flex-tab-webrtc-2-width: 850px;
- --user-image-square: 20px;
--border: 2px;
--border-radius: 2px;
--status-online: var(--rc-color-success);
diff --git a/app/theme/client/main.css b/app/theme/client/main.css
index 56d02e89df83..fa98f893547c 100644
--- a/app/theme/client/main.css
+++ b/app/theme/client/main.css
@@ -58,3 +58,6 @@
/* RTL */
@import 'imports/general/rtl.css';
+
+/* Legacy theming */
+@import 'imports/general/theme_old.css';
diff --git a/app/theme/server/server.js b/app/theme/server/server.js
index 9cde1fc67536..1b3ee5ed7435 100644
--- a/app/theme/server/server.js
+++ b/app/theme/server/server.js
@@ -26,7 +26,6 @@ export const theme = new class {
constructor() {
this.variables = {};
this.packageCallbacks = [];
- this.files = ['server/colors.less'];
this.customCSS = '';
settings.add('css', '');
settings.addGroup('Layout');
@@ -59,9 +58,7 @@ export const theme = new class {
}
compile() {
- let content = [this.getVariablesAsLess()];
-
- content.push(...this.files.map((name) => Assets.getText(name)));
+ let content = [];
content.push(...this.packageCallbacks.map((name) => name()));
@@ -122,14 +119,6 @@ export const theme = new class {
}
}
- addPublicColor(name, value, section, editor = 'color', property) {
- return this.addVariable('color', name, value, section, true, editor, ['color', 'expression'], property);
- }
-
- addPublicFont(name, value) {
- return this.addVariable('font', name, value, 'Fonts', true);
- }
-
getVariablesAsObject() {
return Object.keys(this.variables).reduce((obj, name) => {
obj[name] = this.variables[name].value;
@@ -137,13 +126,6 @@ export const theme = new class {
}, {});
}
- getVariablesAsLess() {
- return Object.keys(this.variables).map((name) => {
- const variable = this.variables[name];
- return `@${ name }: ${ variable.value };`;
- }).join('\n');
- }
-
addPackageAsset(cb) {
this.packageCallbacks.push(cb);
return this.compileDelayed();
diff --git a/app/theme/server/variables.js b/app/theme/server/variables.js
index cf4d7bd587f5..c95c243ffeb6 100644
--- a/app/theme/server/variables.js
+++ b/app/theme/server/variables.js
@@ -10,62 +10,43 @@ import { settings } from '../../settings';
// Major colors form the core of the scheme
// Names changed to reflect usage, comments show pre-refactor names
-const reg = /--(rc-color-.*?): (.*?);/igm;
-
-const colors = [...Assets.getText('client/imports/general/variables.css').match(reg)].map((color) => {
- const [name, value] = color.split(': ');
- return [name.replace('--', ''), value.replace(';', '')];
-});
-
-colors.forEach(([key, color]) => {
- if (/var/.test(color)) {
- const [, value] = color.match(/var\(--(.*?)\)/i);
- return theme.addPublicColor(key, value, 'Colors', 'expression');
- }
- theme.addPublicColor(key, color, 'Colors');
-});
-
-const majorColors = {
- 'content-background-color': '#FFFFFF',
- 'primary-background-color': '#04436A',
- 'primary-font-color': '#444444',
- 'primary-action-color': '#1d74f5', // was action-buttons-color
- 'secondary-background-color': '#F4F4F4',
- 'secondary-font-color': '#A0A0A0',
- 'secondary-action-color': '#DDDDDD',
- 'component-color': '#f2f3f5',
- 'success-color': '#4dff4d',
- 'pending-color': '#FCB316',
- 'error-color': '#BC2031',
- 'selection-color': '#02ACEC',
- 'attention-color': '#9C27B0',
-};
-
-// Minor colours implement major colours by default, but can be overruled
-const minorColors = {
- 'tertiary-background-color': '@component-color',
- 'tertiary-font-color': '@transparent-lightest',
- 'link-font-color': '@primary-action-color',
- 'info-font-color': '@secondary-font-color',
- 'custom-scrollbar-color': '@transparent-darker',
- 'status-online': '@success-color',
- 'status-away': '@pending-color',
- 'status-busy': '@error-color',
- 'status-offline': '@transparent-darker',
-};
-
-// Bulk-add settings for color scheme
-Object.keys(majorColors).forEach((key) => {
- const value = majorColors[key];
- theme.addPublicColor(key, value, 'Old Colors');
-});
-
-Object.keys(minorColors).forEach((key) => {
- const value = minorColors[key];
- theme.addPublicColor(key, value, 'Old Colors (minor)', 'expression');
-});
-
-theme.addPublicFont('body-font-family', '-apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, Oxygen, Ubuntu, Cantarell, \'Helvetica Neue\', \'Apple Color Emoji\', \'Segoe UI Emoji\', \'Segoe UI Symbol\', \'Meiryo UI\', Arial, sans-serif');
+const variablesContent = Assets.getText('client/imports/general/variables.css');
+
+const regionRegex = /\/\*\s*#region\s+([^ ]*?)\s+(.*?)\s*\*\/((.|\s)*?)\/\*\s*#endregion\s*\*\//igm;
+
+for (let matches = regionRegex.exec(variablesContent); matches; matches = regionRegex.exec(variablesContent)) {
+ const [, type, section, content] = matches;
+ [...content.match(/--(.*?):\s*(.*?);/igm)].forEach((entry) => {
+ const matches = /--(.*?):\s*(.*?);/im.exec(entry);
+ const [, name, value] = matches;
+
+ if (type === 'fonts') {
+ theme.addVariable('font', name, value, 'Fonts', true);
+ return;
+ }
+
+ if (type === 'colors') {
+ if (/var/.test(value)) {
+ const [, variableName] = value.match(/var\(--(.*?)\)/i);
+ theme.addVariable('color', name, variableName, section, true, 'expression', ['color', 'expression']);
+ return;
+ }
+
+ theme.addVariable('color', name, value, section, true, 'color', ['color', 'expression']);
+ return;
+ }
+
+ if (type === 'less-colors') {
+ if (/var/.test(value)) {
+ const [, variableName] = value.match(/var\(--(.*?)\)/i);
+ theme.addVariable('color', name, `@${ variableName }`, section, true, 'expression', ['color', 'expression']);
+ return;
+ }
+
+ theme.addVariable('color', name, value, section, true, 'color', ['color', 'expression']);
+ }
+ });
+}
settings.add('theme-custom-css', '', {
group: 'Layout',
diff --git a/app/tokenpass/client/tokenpassChannelSettings.html b/app/tokenpass/client/tokenpassChannelSettings.html
index 4f9ab15e9f37..f0e5490ab438 100644
--- a/app/tokenpass/client/tokenpassChannelSettings.html
+++ b/app/tokenpass/client/tokenpassChannelSettings.html
@@ -1,7 +1,7 @@
diff --git a/app/ui-account/client/accountPreferences.js b/app/ui-account/client/accountPreferences.js
index d17cd1c80943..099fab32f97a 100644
--- a/app/ui-account/client/accountPreferences.js
+++ b/app/ui-account/client/accountPreferences.js
@@ -353,10 +353,10 @@ Template.accountPreferences.events({
'click .js-dont-ask-remove'(e) {
e.preventDefault();
const selectEl = document.getElementById('dont-ask');
- const { options } = selectEl;
- const selectedOption = selectEl.value;
- const optionIndex = Array.from(options).findIndex((option) => option.value === selectedOption);
-
- selectEl.remove(optionIndex);
+ for (let i = selectEl.options.length - 1; i >= 0; i--) {
+ if (selectEl.options[i].selected) {
+ selectEl.remove(i);
+ }
+ }
},
});
diff --git a/app/ui-account/client/accountProfile.html b/app/ui-account/client/accountProfile.html
index 4f6196f3e2c9..edb1ce6f6a8c 100644
--- a/app/ui-account/client/accountProfile.html
+++ b/app/ui-account/client/accountProfile.html
@@ -213,10 +213,6 @@
{{/if}}