Cleanup CSS and drop bMobileDevice detection.

Touch devices can be any size and can use (bluetooth/usb-c mouse/keyboard) these days.
It's all about pixels and currently if the mode is mobile/no-mobile (this can be improved later).

dev/App/Abstract.js

@@ -3,8 +3,7 @@ import ko from 'ko';
 import {
 	$htmlCL,
 	leftPanelDisabled,
-	leftPanelType,
+	leftPanelType
-	bMobileDevice
 } from 'Common/Globals';
 
 import { KeyState } from 'Common/Enums';
@@ -58,7 +57,7 @@ class AbstractApp {
 	 * @returns {boolean}
 	 */
 	download(link) {
-		if (bMobileDevice) {
+		if (rl.settings.app('mobile')) {
 			open(link, '_self');
 			focus();
 		} else {
@@ -99,7 +98,7 @@ class AbstractApp {
 		ko.components.register('Select', require('Component/Select').default);
 		ko.components.register('TextArea', require('Component/TextArea').default);
 
-		if (Settings.app('materialDesign') && !bMobileDevice) {
+		if (Settings.app('materialDesign') && !rl.settings.app('mobile')) {
 			ko.components.register('Checkbox', require('Component/MaterialDesign/Checkbox').default);
 			ko.components.register('CheckboxSimple', require('Component/Checkbox').default);
 		} else {

dev/App/User.js

@@ -17,7 +17,7 @@ import {
 	ClientSideKeyName
 } from 'Common/Enums';
 
-import { $htmlCL, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
+import { $htmlCL, leftPanelDisabled } from 'Common/Globals';
 
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 
@@ -1048,9 +1048,8 @@ class AppUser extends AbstractApp {
 							}, 500);
 						}
 
-						if (!bMobileDevice) {
+						if (!Settings.app('mobile')) {
-							const o = this;
+							setTimeout(() => this.initVerticalLayoutResizer(ClientSideKeyName.FolderListSize), 1);
-							setTimeout(() => o.initVerticalLayoutResizer(ClientSideKeyName.FolderListSize), 1);
 						}
 					} else {
 						this.logout();

dev/Common/Globals.js

@@ -9,13 +9,6 @@ export const $htmlCL = $html.classList;
  */
 export const dropdownVisibility = ko.observable(false).extend({ rateLimit: 0 });
 
-/**
- * @type {boolean}
- */
-export const bMobileDevice = (/android|iphone|ipod|ipad|blackberry|mobile/i).test(
-	(navigator.userAgent && navigator.userAgent.toLowerCase()) || ''
-);
-
 export const VIEW_MODELS = {
 	settings: [],
 	'settings-removed': [],

dev/External/SquireUI.js

@@ -147,6 +147,12 @@ class SquireUI
 {
 	constructor(container) {
 		const
+			doClr = fn => () => {
+				clr.value = '';
+				clr.onchange = () => squire[fn](clr.value);
+				clr.click();
+			},
+
 			actions = {
 				mode: {
 					plain: {
@@ -185,18 +191,12 @@ class SquireUI
 				colors: {
 					textColor: {
 						html: 'A<sub>▾</sub>',
-						cmd: () => {
+						cmd: doClr('setTextColour'),
-							clr.onchange = () => squire.setTextColour(clr.value);
-							clr.click();
-						},
 						hint: 'Text color'
 					},
 					backgroundColor: {
 						html: '🎨', /* ▧ */
-						cmd: () => {
+						cmd: doClr('setHighlightColour'),
-							clr.onchange = () => squire.setHighlightColour(clr.value);
-							clr.click();
-						},
 						hint: 'Background color'
 					},
 				},

dev/External/ko.js

@@ -3,39 +3,32 @@ const
 	ko = window.ko,
 	Translator = () => require('Common/Translator'),
 	Globals = () => require('Common/Globals'),
-	isFunction = v => typeof v === 'function';
+	isFunction = v => typeof v === 'function',
+	koValue = value => !ko.isObservable(value) && isFunction(value) ? value() : ko.unwrap(value);
 
 ko.bindingHandlers.tooltip = {
 	init: (element, fValueAccessor) => {
-		const fValue = fValueAccessor(),
+		const Global = Globals();
-			Global = Globals();
+		const sValue = koValue(fValueAccessor());
 
-		if (!Global.bMobileDevice || 'on' === element.dataset.tooltipMobile) {
+		if ('off' === element.dataset.tooltipI18n) {
-			const sValue = !ko.isObservable(fValue) && isFunction(fValue) ? fValue() : ko.unwrap(fValue);
+			element.title = sValue;
-
+		} else {
-			if ('off' === element.dataset.tooltipI18n) {
+			element.title = Translator().i18n(sValue);
-				element.title = sValue;
+			Translator().trigger.subscribe(() =>
-			} else {
+				element.title = Translator().i18n(sValue)
-				element.title = Translator().i18n(sValue);
+			);
-				Translator().trigger.subscribe(() =>
+			Global.dropdownVisibility.subscribe(() =>
-					element.title = Translator().i18n(sValue)
+				element.title = Translator().i18n(sValue)
-				);
+			);
-				Global.dropdownVisibility.subscribe(() =>
-					element.title = Translator().i18n(sValue)
-				);
-			}
 		}
 	},
 	update: (element, fValueAccessor) => {
-		const fValue = fValueAccessor();
+		const sValue = koValue(fValueAccessor());
-
+		if (sValue) {
-		if (!Globals().bMobileDevice || 'on' === element.dataset.tooltipMobile) {
+			element.title = 'off' === element.dataset.tooltipI18n ? sValue : Translator().i18n(sValue);
-			const sValue = !ko.isObservable(fValue) && isFunction(fValue) ? fValue() : ko.unwrap(fValue);
+		} else {
-			if (sValue) {
+			element.title = '';
-				element.title = 'off' === element.dataset.tooltipI18n ? sValue : Translator().i18n(sValue);
-			} else {
-				element.title = '';
-			}
 		}
 	}
 };
@@ -46,9 +39,7 @@ ko.bindingHandlers.tooltipErrorTip = {
 		ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeAttribute('data-rainloopErrorTip'));
 	},
 	update: (element, fValueAccessor) => {
-		const fValue = fValueAccessor(),
+		const value = koValue(fValueAccessor());
-			value = !ko.isObservable(fValue) && isFunction(fValue) ? fValue() : ko.unwrap(fValue);
-
 		if (value) {
 			setTimeout(() => element.setAttribute('data-rainloopErrorTip', value), 100);
 		} else {
@@ -110,9 +101,8 @@ ko.bindingHandlers.onSpace = {
 
 ko.bindingHandlers.modal = {
 	init: (element, fValueAccessor) => {
-		element.classList.toggle('fade', !Globals().bMobileDevice);
+		const close = element.querySelector('.close'),
-
+			click = () => fValueAccessor()(false);
-		const close = element.querySelector('.close'), click = () => fValueAccessor()(false);
 		close && close.addEventListener('click.koModal', click);
 
 		ko.utils.domNodeDisposal.addDisposeCallback(element, () =>

dev/Knoin/Knoin.js

@@ -2,8 +2,6 @@ import ko from 'ko';
 
 import { $htmlCL, VIEW_MODELS } from 'Common/Globals';
 
-//import { bMobileDevice } from 'Common/Globals';
-
 let currentScreen = null,
 	defaultScreenName = '',
 	popupVisibilityNames = [];
@@ -11,7 +9,7 @@ let currentScreen = null,
 const SCREENS = {},
 	isNonEmptyArray = Array.isNotEmpty,
 	autofocus = dom => {
-//		if (!bMobileDevice) {
+//		if (!rl.settings.app('mobile')) {
 		const af = dom.querySelector('[autofocus]');
 		af && af.focus();
 	};

dev/Model/Attachment.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { FileType } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 import { pInt, getFileExtension, friendlySize } from 'Common/Utils';
 import {
 	attachmentDownload,
@@ -15,7 +14,7 @@ import { AbstractModel } from 'Knoin/AbstractModel';
 
 import Audio from 'Common/Audio';
 
-const bAllowPdfPreview = !bMobileDevice && undefined !== navigator.mimeTypes['application/pdf'];
+const bAllowPdfPreview = undefined !== navigator.mimeTypes['application/pdf'];
 
 /**
  * @param {string} sExt

dev/Screen/User/MailBox.js

@@ -1,5 +1,5 @@
 import { Focused, Capa, ClientSideKeyName } from 'Common/Enums';
-import { leftPanelDisabled, leftPanelType, moveAction, bMobileDevice } from 'Common/Globals';
+import { leftPanelDisabled, leftPanelType, moveAction } from 'Common/Globals';
 import { pString, pInt } from 'Common/Utils';
 import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
 import { i18n } from 'Common/Translator';
@@ -120,7 +120,7 @@ class MailBoxUserScreen extends AbstractScreen {
 	 * @returns {void}
 	 */
 	onBuild() {
-		if (!bMobileDevice && !Settings.app('mobile')) {
+		if (!Settings.app('mobile')) {
 			setTimeout(() =>
 				rl.app.initHorizontalLayoutResizer(ClientSideKeyName.MessageListSize)
 			, 1);

dev/Styles/Identity.less

@@ -22,6 +22,8 @@
 		}
 
 		.e-signature-place {
+			border: 1px solid #ccc;
+			border-radius: 3px;
 			height: 200px;
 		}
 

dev/Styles/Layout.less

@@ -280,6 +280,8 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	}
 }
 
+.visible-on-ctrl,
+.visible-on-ctrl-btn,
 .show-on-panel-disabled {
 	display: none;
 }
@@ -388,10 +390,6 @@ html.rl-bottom-preview-pane {
 	}
 }
 
-.visible-on-ctrl, .visible-on-ctrl-btn {
-	display: none;
-}
-
 .hidden-on-ctrl-btn {
 	display: inline-block;
 }

dev/Styles/Main.less

@@ -58,8 +58,3 @@ html.mobile *, html.rl-mobile * {
 input[type="search"]{
 	box-sizing: content-box;
 }
-
-input::-ms-clear,
-input::-ms-reveal {
-	display: none;
-}

dev/Styles/SettingsOpenPGP.less

@@ -21,14 +21,8 @@
 		}
 
 		.open-pgp-key-img {
-
 			margin-right: 10px;
 			vertical-align: top;
-
-			.svg-icon {
-				width: 12px;
-				height: 12px;
-			}
 		}
 
 		.open-pgp-key-id, .open-pgp-key-user {

dev/Styles/SquireUI.less

@@ -10,8 +10,7 @@
 }
 
 .squire-toolgroup > button,
-.squire-toolgroup > select,
+.squire-toolgroup > select {
-.squire-toolgroup > input[type="color"] {
 	background: transparent;
 	border: 0;
 	box-shadow: none;
@@ -104,8 +103,7 @@ Secondly, we can't rely on MUA's what to do with :empty
 	right: 0;
 }
 .rl-mobile .squire-toolgroup > button,
-.rl-mobile .squire-toolgroup > select,
+.rl-mobile .squire-toolgroup > select {
-.rl-mobile .squire-toolgroup > input[type="color"] {
 	height: 2.5em;
 	line-height: 2.8;
 	width: 3em;

dev/Styles/Ui.less

@@ -183,6 +183,7 @@
 	}
 }
 
+html.mobile .hide-mobile,
 .command.command-disabled.hide-on-disabled-command {
 	display:none;
 }

dev/Styles/_BootstrapFix.less

@@ -67,10 +67,6 @@ select {
 	width: 223px;
 }
 
-.btn .svg-icon {
-	vertical-align: middle;
-}
-
 .btn-small.btn-small-small {
 	padding: 3px 9px;
 	font-size: 11px;

dev/Styles/_CkeFix.less

@@ -16,7 +16,7 @@
 }
 
 .cke_top {
-	padding: 6px 4px 1px 6px;
+	padding: 2px;
 	box-shadow: none !important;
 	border-bottom: 1px solid #b6b6b6 !important;
 	background: #F0F0F0 !important;

dev/Styles/_End.less

@@ -73,25 +73,6 @@
 	z-index: 2002;
 }
 
-svg-icon {
-	display: none;
-}
-
-.svg-icon {
-	border: 0;
-	outline: 0;
-
-	height: 16px;
-	width: 16px;
-	display: inline-block;
-	fill: #333;
-
-	&.svg-icon-archive {
-		height: 14px;
-		width: 14px;
-	}
-}
-
 .lg-backdrop.in {
 	opacity: 0.8;
 }
@@ -116,3 +97,23 @@ html.glass {
 		transition: color 9999s ease-out, background-color 9999s ease-out;
 	}
 }
+
+/*
+@media (pointer: coarse), (hover: none) {
+	[title] {
+		position: relative;
+		display: inline-flex;
+		justify-content: center;
+	}
+	[title]:focus::after {
+		content: attr(title);
+		position: absolute;
+		top: 90%;
+		color: #000;
+		background-color: #fff;
+		border: 1px solid;
+		width: fit-content;
+		padding: 3px;
+	}
+}
+*/

dev/Styles/_InputosaurusFix.less

@@ -1,77 +1,10 @@
 
 .inputosaurus-container {
 
-	width: 99%;
-	line-height: 20px;
-	padding: 2px;
-	border: 1px solid #cccccc;
-	border-radius: 3px;
-
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-	transition: border linear .2s, box-shadow linear .2s;
-
 	&.inputosaurus-focused {
 		background-color: #fff;
 		border: @rlInputBorderSize solid darken(@inputBorder, 20%);
 		box-shadow: none;
 	}
 
-	li {
-		max-width: 500px;
-		background-color: #eee;
-		border: 1px solid #aaa;
-		line-height: 18px;
-		padding: 2px 15px 2px 5px;
-		margin: 2px 2px 2px;
-		color: #555;
-		z-index: 100;
-
-		position: relative;
-
-		a {
-			color: #999;
-			font-size: 12px;
-			position: absolute;
-			top: 1px;
-			right: 2px;
-
-			&:hover {
-				color: #666;
-			}
-		}
-
-		span {
-			padding-right: 3px;
-		}
-
-		&.inputosaurus-required {
-			padding-right: 5px;
-		}
-
-		&.inputosaurus-selected {
-			background-color: #ddd;
-		}
-
-		&.pgp {
-			background-color: #E5F3E2;
-		}
-	}
-
-	.inputosaurus-input {
-
-		margin: 1px 10px 1px 0;
-		height: 22px;
-
-		input {
-			border: 0;
-			height : 21px;
-			padding-left: 0;
-		}
-	}
-}
-
-.inputosaurus-fake-span {
-	position: absolute;
-	top: 0;
-	left: -5000px;
 }

dev/View/Popup/Compose.js

@@ -26,7 +26,6 @@ import { format as momentorFormat } from 'Common/Momentor';
 import { getMessageFlagsFromCache, setMessageFlagsToCache, setFolderHash } from 'Common/Cache';
 
 import { HtmlEditor } from 'Common/HtmlEditor';
-import { bMobileDevice } from 'Common/Globals';
 
 import AppStore from 'Stores/User/App';
 import SettingsStore from 'Stores/User/Settings';
@@ -1080,17 +1079,16 @@ class ComposePopupView extends AbstractViewNext {
 	}
 
 	setFocusInPopup() {
-		if (!bMobileDevice) {
+//		rl.settings.app('mobile') ||
-			setTimeout(() => {
+		setTimeout(() => {
-				if (!this.to()) {
+			if (!this.to()) {
-					this.to.focused(true);
+				this.to.focused(true);
-				} else if (this.oEditor) {
+			} else if (this.oEditor) {
-					if (!this.to.focused()) {
+				if (!this.to.focused()) {
-						this.oEditor.focus();
+					this.oEditor.focus();
-					}
 				}
-			}, 100);
+			}
-		}
+		}, 100);
 	}
 
 	tryToClosePopup() {

dev/View/Popup/Contacts.js

@@ -18,7 +18,6 @@ import {
 } from 'Common/Utils';
 
 import { CONTACTS_PER_PAGE } from 'Common/Consts';
-import { bMobileDevice } from 'Common/Globals';
 
 import { Selector } from 'Common/Selector';
 import { exportContactsVcf, exportContactsCsv, uploadContacts } from 'Common/Links';
@@ -58,7 +57,6 @@ class ContactsPopupView extends AbstractViewNext {
 
 		this.allowContactsSync = ContactStore.allowContactsSync;
 		this.enableContactsSync = ContactStore.enableContactsSync;
-		this.allowExport = !bMobileDevice;
 
 		this.search = ko.observable('');
 		this.contactsCount = ko.observable(0);

dev/View/Popup/Filter.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { FiltersAction, FilterConditionField, FilterConditionType } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 import { defautOptionsAfterRender } from 'Common/Utils';
 import { i18n, initOnStartOrLangChange } from 'Common/Translator';
 
@@ -163,7 +162,7 @@ class FilterPopupView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (this.isNew() && this.filter() && !bMobileDevice) {
+		if (this.isNew() && this.filter()/* && !rl.settings.app('mobile')*/) {
 			this.filter().name.focused(true);
 		}
 	}

dev/View/Popup/FolderCreate.js

@@ -2,7 +2,6 @@ import ko from 'ko';
 
 import { Notification } from 'Common/Enums';
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
-import { bMobileDevice } from 'Common/Globals';
 import { defautOptionsAfterRender, folderListOptionsBuilder } from 'Common/Utils';
 
 import FolderStore from 'Stores/User/Folder';
@@ -74,9 +73,8 @@ class FolderCreateView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (!bMobileDevice) {
+//		rl.settings.app('mobile') ||
-			this.folderName.focused(true);
+		this.folderName.focused(true);
-		}
 	}
 }
 

dev/View/Popup/Identity.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { StorageResultType, Notification } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 import { fakeMd5 } from 'Common/Utils';
 import { getNotification } from 'Common/Translator';
 
@@ -164,7 +163,7 @@ class IdentityPopupView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (!this.owner() && !bMobileDevice) {
+		if (!this.owner()/* && !rl.settings.app('mobile')*/) {
 			this.email.focused(true);
 		}
 	}

dev/View/Popup/TwoFactorTest.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { StorageResultType } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 
 import Remote from 'Remote/User/Fetch';
 
@@ -54,9 +53,8 @@ class TwoFactorTestPopupView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (!bMobileDevice) {
+//		rl.settings.app('mobile') ||
-			this.code.focused(true);
+		this.code.focused(true);
-		}
 	}
 }
 

dev/View/User/MailBox/MessageList.js

@@ -13,7 +13,7 @@ import {
 
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 
-import { bMobileDevice, leftPanelDisabled, moveAction } from 'Common/Globals';
+import { leftPanelDisabled, moveAction } from 'Common/Globals';
 
 import { computedPagenatorHelper, friendlySize } from 'Common/Utils';
 
@@ -736,7 +736,7 @@ class MessageListMailBoxUserView extends AbstractViewNext {
 		this.initUploaderForAppend();
 		this.initShortcuts();
 
-		if (!bMobileDevice && ifvisible && Settings.capa(Capa.Prefetch)) {
+		if (ifvisible && !rl.settings.app('mobile') && Settings.capa(Capa.Prefetch)) {
 			ifvisible.idle(this.prefetchNextTick.bind(this));
 		}
 	}

rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php

@@ -236,10 +236,7 @@ class Actions
 	private function fabrica(string $sName, ?Model\Account $oAccount = null)
 	{
 		$mResult = null;
-		$this->Plugins()
+		$this->Plugins()->RunHook('main.fabrica', array($sName, &$mResult), false);
-			->RunHook('main.fabrica', array($sName, &$mResult), false)
-			->RunHook('main.fabrica[2]', array($sName, &$mResult, $oAccount), false)
-		;
 
 		if (null === $mResult)
 		{
@@ -3839,7 +3836,6 @@ NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink Aut
 		}
 
 		$this->Plugins()->RunHook('filter.build-message', array($oMessage));
-		$this->Plugins()->RunHook('filter.build-message[2]', array($oMessage, $oAccount));
 
 		return $oMessage;
 	}
@@ -3932,10 +3928,7 @@ NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink Aut
 
 		$oMessage = $this->buildMessage($oAccount, true);
 
-		$this->Plugins()
+		$this->Plugins()->RunHook('filter.save-message', array($oMessage));
-			->RunHook('filter.save-message', array($oMessage))
-			->RunHook('filter.save-message[2]', array($oMessage, $oAccount))
-		;
 
 		$mResult = false;
 		if ($oMessage)
@@ -4156,10 +4149,7 @@ NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink Aut
 
 		$oMessage = $this->buildMessage($oAccount, false);
 
-		$this->Plugins()
+		$this->Plugins()->RunHook('filter.send-message', array($oMessage));
-			->RunHook('filter.send-message', array($oMessage))
-			->RunHook('filter.send-message[2]', array($oMessage, $oAccount))
-		;
 
 		$mResult = false;
 		try
@@ -4217,7 +4207,7 @@ NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink Aut
 									\rewind($rMessageStream);
 								}
 
-								$this->Plugins()->RunHook('filter.sent-message-stream',
+								$this->Plugins()->RunHook('filter.send-message-stream',
 									array($oAccount, &$rMessageStream, &$iMessageStreamSize));
 
 								$this->MailClient()->MessageAppendStream(
@@ -4233,7 +4223,7 @@ NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink Aut
 								$iAppendMessageStreamSize = \MailSo\Base\Utils::MultipleStreamWriter(
 									$oMessage->ToStream(false), array($rAppendMessageStream), 8192, true, true, true);
 
-								$this->Plugins()->RunHook('filter.sent-message-stream',
+								$this->Plugins()->RunHook('filter.send-message-stream',
 									array($oAccount, &$rAppendMessageStream, &$iAppendMessageStreamSize));
 
 								$this->MailClient()->MessageAppendStream(
@@ -5018,10 +5008,7 @@ NewThemeLink IncludeCss TemplatesLink LangLink IncludeBackground PluginsLink Aut
 
 		if ($oMessage)
 		{
-			$this->Plugins()
+			$this->Plugins()->RunHook('filter.result-message', array($oMessage));
-				->RunHook('filter.result-message', array($oMessage))
-				->RunHook('filter.result-message[2]', array($oMessage, $oAccount))
-			;
 
 			$this->cacheByKey($sRawKey);
 		}

rainloop/v/0.0.0/app/libraries/RainLoop/Plugins/Manager.php

@@ -289,12 +289,6 @@ class Manager
 			}
 
 			$this->RunHook('filter.app-data', array($bAdmin, &$aAppData));
-
-			$this->RunHook('filter.app-data[2]', array(
-				'IsAdmin' => $bAdmin,
-				'AppData' => &$aAppData,
-				'Account' => $oAccount
-			));
 		}
 
 		return $this;

rainloop/v/0.0.0/app/templates/Themes/template.less

@@ -1,26 +1,16 @@
 
 // mixins +++
 .thm-linear-gradient-mixin(@start, @end) when (iscolor(@start)) and (iscolor(@end)) {
-	background-color: mix(@start, @end, 60%) !important;
-    background-image: -moz-linear-gradient(top, @start, @end) !important; // FF 3.6+
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@start), to(@end)) !important; // Safari 4+, Chrome 2+
-    background-image: -webkit-linear-gradient(top, @start, @end) !important; // Safari 5.1+, Chrome 10+
-    background-image: -o-linear-gradient(top, @start, @end !important); // Opera 11.10
     background-image: linear-gradient(to bottom, @start, @end) !important; // Standard, IE10
     background-repeat: repeat-x !important;
-    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@start),argb(@end))) !important; // IE9 and down
 }
 
 .thm-border-radius(@radius) when (ispixel(@radius)) {
-  -webkit-border-radius: @radius !important;
+	border-radius: @radius !important;
-     -moz-border-radius: @radius !important;
-          border-radius: @radius !important;
 }
 
 .thm-box-shadow(@shadow) {
-  -webkit-box-shadow: @shadow !important;
+	box-shadow: @shadow !important;
-     -moz-box-shadow: @shadow !important;
-          box-shadow: @shadow !important;
 }
 .thm-body-background-image(@value) when (isstring(@value)) {
 	background-image: url("@{base}@{value}");
@@ -231,26 +221,6 @@ html.glass {
 				color: @glass-color;
 				border-color: @glass-m-color;
 
-				&::-webkit-input-placeholder {
-					color: @glass-color;
-					text-shadow: none !important;
-				}
-				&::-moz-placeholder {
-					color: @glass-color;
-					text-shadow: none !important;
-				}
-				&:-moz-placeholder {
-					color: @glass-color;
-					text-shadow: none !important;
-				}
-				&:-ms-input-placeholder {
-					color: @glass-color;
-					text-shadow: none !important;
-				}
-				&:input-placeholder {
-					color: @glass-color;
-					text-shadow: none !important;
-				}
 				&:placeholder {
 					color: @glass-color;
 					text-shadow: none !important;

rainloop/v/0.0.0/app/templates/Views/Admin/AdminLogin.html

@@ -25,7 +25,7 @@
 								placeholder="Password" name="RainLoopAdminPassword" id="RainLoopAdminPassword"
 								autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false" data-i18n="[placeholder]LOGIN/LABEL_PASSWORD"
 								data-bind="textInput: password, disable: submitRequest" />
-							<span class="add-on" tabindex="-1" data-tooltip-join="left" data-bind="command: submitCommand, tooltip: 'LOGIN/BUTTON_LOGIN'">
+							<span class="add-on" tabindex="-1" data-bind="command: submitCommand, tooltip: 'LOGIN/BUTTON_LOGIN'">
 								<i class="icon-key" data-bind="visible: '' === password()"></i>
 								<button type="submit" class="btn-submit-icon-wrp" data-bind="visible: '' !== password()">
 									<i class="icon-right-middle login-submit-icon"></i>

rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomain.html

@@ -1,4 +1,4 @@
-<div class="modal b-domain-content g-ui-user-select-none"
+<div class="modal fade b-domain-content g-ui-user-select-none"
 	data-bind="modal: modalVisibility, css: {'domain-edit': edit, 'domain-second-page': 'main' !== page()}">
 	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/Admin/PopupsDomainAlias.html

@@ -1,4 +1,4 @@
-<div class="modal b-domain-alias-content" data-bind="modal: modalVisibility">
+<div class="modal fade b-domain-alias-content" data-bind="modal: modalVisibility">
 	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
 		<h3 data-i18n="POPUPS_DOMAIN_ALIAS/TITLE_ADD_DOMAIN_ALIAS"></h3>

rainloop/v/0.0.0/app/templates/Views/Admin/PopupsPlugin.html

@@ -1,4 +1,4 @@
-<div class="modal b-plugin-content" data-bind="modal: modalVisibility">
+<div class="modal fade b-plugin-content" data-bind="modal: modalVisibility">
 	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
 		<h4>

rainloop/v/0.0.0/app/templates/Views/Common/PopupsAsk.html

@@ -1,4 +1,4 @@
-<div class="modal b-ask-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-ask-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-body">
 			<br />

rainloop/v/0.0.0/app/templates/Views/Common/PopupsKeyboardShortcutsHelp.html

@@ -1,4 +1,4 @@
-<div class="modal b-shortcuts-content" data-bind="modal: modalVisibility">
+<div class="modal fade b-shortcuts-content" data-bind="modal: modalVisibility">
 	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
 		<h3 class="i18n" data-i18n="SHORTCUTS_HELP/LEGEND_SHORTCUTS_HELP"></h3>

rainloop/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html

@@ -1,4 +1,4 @@
-<div class="modal b-languages-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-languages-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
 		<h3>
@@ -7,7 +7,7 @@
 	</div>
 	<div class="modal-body" style="min-height: 150px;">
 		<div data-bind="foreach: languages">
-			<label class="lang-item" data-tooltip-i18n="off" data-tooltip-join="right" data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
+			<label class="lang-item" data-tooltip-i18n="off" data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
 				tooltip: function () { return $root.languageTooltipName(key); }">
 				<span class="lang-name" data-bind="text: fullName"></span>
 				<i class="icon-ok pull-right" style="color: green; margin-top: 3px;" data-bind="visible: selected"></i>

rainloop/v/0.0.0/app/templates/Views/User/Login.html

@@ -49,7 +49,7 @@
 								autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false"
 								data-bind="textInput: password, disable: submitRequest"
 								data-i18n="[placeholder]LOGIN/LABEL_PASSWORD" />
-							<span class="add-on" tabindex="-1" data-tooltip-join="left"
+							<span class="add-on" tabindex="-1"
 								data-bind="command: submitCommand, tooltip: 'LOGIN/BUTTON_SIGN_IN'">
 								<i class="icon-key" data-bind="visible: '' === password()"></i>
 								<button type="submit" class="btn-submit-icon-wrp" data-bind="visible: '' !== password()">

rainloop/v/0.0.0/app/templates/Views/User/MailFolderList.html

@@ -1,12 +1,12 @@
 <div class="b-folders g-ui-user-select-none thm-folders" data-bind="css: {'focused': folderListFocused, 'single-root-inbox': foldersListWithSingleInboxRootFolder, 'inbox-is-starred': isInboxStarred}">
 	<div class="b-toolbar btn-toolbar hide-on-mobile">
-		<a class="btn buttonCompose pull-left" data-tooltip-join="top" data-bind="visible: allowComposer, click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
+		<a class="btn buttonCompose pull-left" data-bind="visible: allowComposer, click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
 			<i class="icon-paper-plane"></i>
 			<span class="btn-text-wrp buttonComposeText">
 				<span class="i18n" data-i18n="FOLDER_LIST/BUTTON_NEW_MESSAGE"></span>
 			</span>
 		</a>
-		<a class="btn buttonContacts pull-left" data-tooltip-join="top" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
+		<a class="btn buttonContacts pull-left" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
 			<i class="icon-address-book"></i>
 		</a>
 	</div>

rainloop/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -17,20 +17,20 @@
 				<div class="btn-group">&nbsp;</div>
 				<!-- /ko -->
 				<div class="btn-group" data-bind="visible: mobile && allowComposer && mobileCheckedStateHide()">
-					<a class="btn single buttonCompose" data-tooltip-join="top" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
+					<a class="btn single buttonCompose" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_NEW_MESSAGE', css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}">
 						<i class="icon-paper-plane"></i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: mobileCheckedStateHide()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">
-					<a class="btn single btn-dark-disabled-border buttonReload" data-tooltip-join="top" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
+					<a class="btn single btn-dark-disabled-border buttonReload" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
 						<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottleForAnimation}"></i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: allowReload && mobileCheckedStateHide()">&nbsp;</div>
 				<!-- ko if: !newMoveToFolder() -->
 				<div class="btn-group dropdown colored-toggle hide-on-mobile" data-bind="visible: allowMessageListActions, registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
-					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-join="top" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
+					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
 						<i class="icon-copy visible-on-ctrl-btn"></i>
 						<i class="icon-folder hidden-on-ctrl-btn"></i>
 						&nbsp;&nbsp;
@@ -50,7 +50,7 @@
 				<!-- /ko -->
 				<!-- ko if: newMoveToFolder() -->
 				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
-					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border buttonMove" data-tooltip-join="top" data-bind="command: moveNewCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
+					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border buttonMove" data-bind="command: moveNewCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
 						<i class="icon-copy visible-on-ctrl-btn"></i>
 						<i class="icon-folder hidden-on-ctrl-btn"></i>
 					</a>
@@ -58,21 +58,21 @@
 				<!-- /ko -->
 				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateHide()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: allowMessageListActions && mobileCheckedStateShow()">
-					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top"
+					<a class="btn first btn-dark-disabled-border button-archive"
 						data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
 						<i class="icon-archive"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top"
+					<a class="btn btn-dark-disabled-border button-spam"
 						data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM',
 							css: {'first': !isArchiveVisible()}">
 						<i class="icon-warning"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-join="top"
+					<a class="btn btn-dark-disabled-border button-not-spam"
 						data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'MESSAGE_LIST/BUTTON_NOT_SPAM',
 							css: {'first': !isArchiveVisible()}">
 						<i class="icon-check-mark-circle-two"></i>
 					</a>
-					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top"
+					<a class="btn last btn-dark-disabled-border button-delete"
 						data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE',
 							css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
 						<i class="icon-trash"></i>
@@ -80,7 +80,7 @@
 					</a>
 				</div>
 				<div class="btn-group dropdown colored-toggle" data-bind="visible: allowComposer || allowMessageListActions || allowDangerousActions, registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
-					<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
+					<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
 						<i class="icon-list animate-this-icon-on-open"></i>
 					</a>
 					<ul class="dropdown-menu pull-right g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">
@@ -206,7 +206,7 @@
 			</div>
 			<div class="mainDelimiter footerDelimiter"></div>
 			<div class="b-footer thm-message-list-bottom-toolbar">
-				<span data-tooltip-i18n="off" data-tooltip-mobile="on" data-bind="visible: 0 < userUsageProc(), tooltip: quotaTooltip" class="e-quota">
+				<span data-tooltip-i18n="off" data-bind="visible: 0 < userUsageProc(), tooltip: quotaTooltip" class="e-quota">
 					<span data-bind="text: userUsageProc"></span>%
 				</span>
 				<div class="pull-right">

rainloop/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -2,29 +2,29 @@
 	<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': messageFocused}">
 		<div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()">
 			<div class="messageButtons btn-toolbar">
-				<div class="btn-group" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE/BUTTON_CLOSE'">
+				<div class="btn-group" data-bind="tooltip: 'MESSAGE/BUTTON_CLOSE'">
 					<a class="btn single btn-dark-disabled-border buttonClose" data-bind="command: closeMessageCommand">
 						<i class="icon-remove"></i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
-				<div class="btn-group" data-tooltip-join="top" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
+				<div class="btn-group" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
 					<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
 						<i class="icon-pencil icon-white"></i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: !usePreviewPane()">
-					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
+					<a class="btn first btn-dark-disabled-border button-archive" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
 						<i class="icon-archive"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
+					<a class="btn btn-dark-disabled-border button-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
 						<i class="icon-warning"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-join="top" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'MESSAGE/BUTTON_NOT_SPAM'">
+					<a class="btn btn-dark-disabled-border button-not-spam" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'MESSAGE/BUTTON_NOT_SPAM'">
 						<i class="icon-check-mark-circle-two"></i>
 					</a>
-					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
+					<a class="btn last btn-dark-disabled-border button-delete" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
 						<i class="icon-trash"></i>
 					</a>
 				</div>
@@ -79,7 +79,7 @@
 				<div class="message-fixed-button-toolbar clearfix" data-bind="visible: message">
 					<div class="btn-group pull-right" style="margin-right: -11px;">
 						<div class="btn-group pull-right" data-bind="registrateBootstrapDropdown: true, visible: allowComposer || allowMessageListActions || allowMessageActions">
-							<a class="btn btn-thin-2 btn-transparent last btn-dark-disabled-border dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-join="bottom" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand, css: {'first': !allowComposer}">
+							<a class="btn btn-thin-2 btn-transparent last btn-dark-disabled-border dropdown-toggle buttonMore" id="more-view-dropdown-id" href="#" tabindex="-1" data-toggle="dropdown" style="margin-left: -4px; margin-right: 2px" data-bind="command: messageVisibilityCommand, css: {'first': !allowComposer}">
 									<span data-bind="visible: !allowComposer" class="icon-ellipsis-alt"></span>
 									<span data-bind="visible: allowComposer" class="caret"></span>
 							</a>
@@ -194,21 +194,21 @@
 								</div>
 							</ul>
 						</div>
-						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReply pull-right" data-tooltip-join="bottom"
+						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReply pull-right"
 							data-bind="visible: 'reply' === lastReplyAction() && allowComposer, command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
 							<i class="icon-reply"></i>
 						</a>
-						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReplyAll pull-right" data-tooltip-join="bottom"
+						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonReplyAll pull-right"
 							data-bind="visible: 'replyall' === lastReplyAction() && allowComposer, command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
 							<i class="icon-reply-all"></i>
 						</a>
-						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonForward pull-right" data-tooltip-join="bottom"
+						<a class="btn btn-thin-2 btn-transparent first btn-dark-disabled-border buttonForward pull-right"
 							data-bind="visible: 'forward' === lastReplyAction() && allowComposer, command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
 							<i class="icon-forward"></i>
 						</a>
 					</div>
 
-					<div class="btn-group pull-right hide-on-mobile" data-tooltip-join="right" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px">
+					<div class="btn-group pull-right hide-on-mobile" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'" style="margin-right: 5px">
 						<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
 							<i class="icon-pencil icon-white"></i>
 						</a>
@@ -339,7 +339,7 @@
 										<div class="attachmentsPlace" data-bind="visible: message() && message().attachments().hasVisible(),
 											css: {'selection-mode' : showAttachmnetControls, 'unselectedAttachmentsError': highlightUnselectedAttachments}">
 											<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
-												<li class="attachmentItem clearfix" draggable="true" data-tooltip-join="top"
+												<li class="attachmentItem clearfix" draggable="true"
 														data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
 													<div class="attachmentIconParent pull-left" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
 														<div class="hidePreview">

rainloop/v/0.0.0/app/templates/Views/User/PopupsAccount.html

@@ -1,4 +1,4 @@
-<div class="modal b-account-add-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-account-add-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsAddOpenPgpKey.html

@@ -1,4 +1,4 @@
-<div class="modal b-open-pgp-key-add-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-open-pgp-key-add-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsAdvancedSearch.html

@@ -1,4 +1,4 @@
-<div class="modal b-advanced-search-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-advanced-search-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
 		<h3>

rainloop/v/0.0.0/app/templates/Views/User/PopupsCompose.html

@@ -1,4 +1,4 @@
-<div class="modal b-compose" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}">
+<div class="modal fade b-compose" data-bind="modal: modalVisibility, css: {'loading': saving() || sending()}">
 	<div class="modal-header b-header-toolbar g-ui-user-select-none">
 		<a class="btn btn-large button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
 			<i class="icon-white" data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner animated big': sending()}"></i>
@@ -9,8 +9,8 @@
 			<span class="i18n btn-text hide-on-mobile" data-i18n="COMPOSE/BUTTON_SAVE"></span>
 		</a>
 
-		<a class="close-custom" data-tooltip-join="top" data-bind="click: tryToClosePopup, tooltip: 'COMPOSE/BUTTON_CANCEL'">&times;</a>
+		<a class="close-custom" data-bind="click: tryToClosePopup, tooltip: 'COMPOSE/BUTTON_CANCEL'">&times;</a>
-		<a class="minimize-custom" data-tooltip-join="top" data-bind="click: skipCommand, tooltip: 'COMPOSE/BUTTON_MINIMIZE'"></a>
+		<a class="minimize-custom" data-bind="click: skipCommand, tooltip: 'COMPOSE/BUTTON_MINIMIZE'"></a>
 
 		<a class="btn btn-danger button-delete button-delete-transitions" data-bind="command: deleteCommand">
 			<i class="icon-trash icon-white"></i>
@@ -83,7 +83,7 @@
 							</div>
 							<div class="btn-group pull-right">&nbsp;</div>
 							<div class="btn-group pull-right">
-								<a class="btn single" data-tooltip-join="top" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
+								<a class="btn single" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
 									<i class="icon-address-book"></i>
 								</a>
 							</div>
@@ -107,7 +107,7 @@
 				<div class="e-row">
 					<div class="e-cell e-label">
 						<label class="control-label" data-bind="css: {'error-to': emptyToError}">
-							<span class="i18n" data-i18n="COMPOSE/TITLE_TO" data-tooltip-join="top"
+							<span class="i18n" data-i18n="COMPOSE/TITLE_TO"
 								data-bind="tooltipErrorTip: emptyToErrorTooltip"></span>
 						</label>
 					</div>
@@ -157,7 +157,7 @@
 										css: { 'active': !attachmentsPlace() }">
 										<i class="icon-file-text"></i>
 									</button>
-									<button type="button" class="btn last" data-tooltip-join="left" data-bind="click: function () { attachmentsPlace(true); },
+									<button type="button" class="btn last" data-bind="click: function () { attachmentsPlace(true); },
 										css: { 'btn-danger': 0 < attachmentsInErrorCount(), 'active': attachmentsPlace() },
 										tooltipErrorTip: attachmentsErrorTooltip">
 										<span data-bind="visible: 0 < attachmentsCount()">
@@ -170,7 +170,7 @@
 							</div>
 							<div class="pull-right" style="margin-right: 4px;">
 								<div class="btn-group pull-right">
-									<a class="btn first" data-tooltip-join="bottom"
+									<a class="btn first"
 										style="padding-left: 10px; padding-right: 10px;"
 										data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'">
 										<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>

rainloop/v/0.0.0/app/templates/Views/User/PopupsComposeOpenPgp.html

@@ -1,4 +1,4 @@
-<div class="modal b-compose-open-pgp-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-compose-open-pgp-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsContacts.html

@@ -1,4 +1,4 @@
-<div class="modal b-contacts-content" data-bind="modal: modalVisibility">
+<div class="modal fade b-contacts-content" data-bind="modal: modalVisibility">
 	<div class="modal-header b-header-toolbar g-ui-user-select-none">
 
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
@@ -38,15 +38,15 @@
 							<span class="i18n" data-i18n="CONTACTS/BUTTON_IMPORT"></span>
 						</a>
 					</li>
-					<li class="divider" role="presentation" data-bind="visible: allowExport"></li>
+					<li class="divider hide-mobile" role="presentation"></li>
-					<li class="e-item" role="presentation" data-bind="visible: allowExport">
+					<li class="e-item hide-mobile" role="presentation">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportCsv">
 							<i data-bind="css: {'icon-export': !contacts.exportingCsv(), 'icon-spinner animated': contacts.exportingCsv}"></i>
 							&nbsp;&nbsp;
 							<span class="i18n" data-i18n="CONTACTS/BUTTON_EXPORT_CSV"></span>
 						</a>
 					</li>
-					<li class="e-item" role="presentation" data-bind="visible: allowExport" >
+					<li class="e-item hide-mobile" role="presentation">
 						<a class="e-link menuitem" href="#" tabindex="-1" data-bind="click: exportVcf">
 							<i data-bind="css: {'icon-export': !contacts.exportingVcf(), 'icon-spinner animated': contacts.exportingVcf}"></i>
 							&nbsp;&nbsp;
@@ -204,7 +204,7 @@
 							</div>
 							<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
 								<label class="control-label remove-padding-top fix-width">
-									<i class="icon-at iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
+									<i class="icon-at iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
 								</label>
 								<div class="controls fix-width">
 									<div data-bind="foreach: viewPropertiesEmails">
@@ -220,7 +220,7 @@
 							</div>
 							<div class="control-group" data-bind="visible: 0 < viewPropertiesPhones().length">
 								<label class="control-label remove-padding-top fix-width">
-									<i class="icon-telephone iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
+									<i class="icon-telephone iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
 								</label>
 								<div class="controls fix-width">
 									<div data-bind="foreach: viewPropertiesPhones">
@@ -235,7 +235,7 @@
 							</div>
 							<div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length">
 								<label class="control-label remove-padding-top fix-width">
-									<i class="icon-world iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_WEB'"></i>
+									<i class="icon-world iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_WEB'"></i>
 								</label>
 								<div class="controls fix-width">
 									<div data-bind="foreach: viewPropertiesWeb">
@@ -257,7 +257,7 @@
 						</div>
 
 <!--						<div class="e-read-only-sign">
-							<i class="icon-lock iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
+							<i class="icon-lock iconsize24" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
 						</div>-->
 
 

rainloop/v/0.0.0/app/templates/Views/User/PopupsFilter.html

@@ -1,4 +1,4 @@
-<div class="modal b-filter-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-filter-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsFolderClear.html

@@ -1,4 +1,4 @@
-<div class="modal b-folder-clear-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-folder-clear-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsFolderCreate.html

@@ -1,4 +1,4 @@
-<div class="modal b-folder-create-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-folder-create-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsFolderSystem.html

@@ -1,4 +1,4 @@
-<div class="modal b-folder-system-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-folder-system-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
 		<h3>

rainloop/v/0.0.0/app/templates/Views/User/PopupsIdentity.html

@@ -1,4 +1,4 @@
-<div class="modal b-identity-content" data-bind="modal: modalVisibility">
+<div class="modal fade b-identity-content" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header g-ui-user-select-none">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsMessageOpenPgp.html

@@ -1,4 +1,4 @@
-<div class="modal b-message-open-pgp-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-message-open-pgp-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsNewOpenPgpKey.html

@@ -1,4 +1,4 @@
-<div class="modal b-open-pgp-key-generate-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-open-pgp-key-generate-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsTemplate.html

@@ -1,4 +1,4 @@
-<div class="modal b-template-add-content" data-bind="modal: modalVisibility">
+<div class="modal fade b-template-add-content" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header g-ui-user-select-none">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsTwoFactorConfiguration.html

@@ -1,4 +1,4 @@
-<div class="modal b-two-factor-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-two-factor-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="visible: viewEnable() || !lock(), command: cancelCommand">&times;</button>
@@ -10,7 +10,7 @@
 			<div class="form-horizontal" data-bind="visible: capaTwoFactor" style="margin-top: 10px;">
 				<div class="control-group" data-bind="visible: twoFactorStatus">
 					<div class="controls">
-						<div style="display: inline-block" data-tooltip-join="top" data-bind="tooltip: viewTwoFactorEnableTooltip">
+						<div style="display: inline-block" data-bind="tooltip: viewTwoFactorEnableTooltip">
 							<div data-bind="component: {
 								name: 'Checkbox',
 								params: {

rainloop/v/0.0.0/app/templates/Views/User/PopupsTwoFactorTest.html

@@ -1,4 +1,4 @@
-<div class="modal b-two-factor-test-content g-ui-user-select-none" data-bind="modal: modalVisibility">
+<div class="modal fade b-two-factor-test-content g-ui-user-select-none" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/PopupsViewOpenPgpKey.html

@@ -1,4 +1,4 @@
-<div class="modal b-open-pgp-key-view-content" data-bind="modal: modalVisibility">
+<div class="modal fade b-open-pgp-key-view-content" data-bind="modal: modalVisibility">
 	<div>
 		<div class="modal-header g-ui-user-select-none">
 			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>

rainloop/v/0.0.0/app/templates/Views/User/SettingsFilters.html

@@ -14,7 +14,7 @@
 				<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
 			</a>
 			&nbsp;&nbsp;
-			<a class="btn" data-tooltip-join="top" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
+			<a class="btn" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
 				css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
 				<i class="icon-file-code"></i>
 			</a>

rainloop/v/0.0.0/app/templates/Views/User/SettingsOpenPGP.html

@@ -10,7 +10,7 @@
 		<span class="i18n" data-i18n="SETTINGS_OPEN_PGP/BUTTON_ADD_OPEN_PGP_KEY"></span>
 	</button>
 	&nbsp;&nbsp;
-	<div style="display: inline-block" data-tooltip-join="left" data-bind="tooltip: 'SETTINGS_OPEN_PGP/GENERATE_ONLY_HTTPS'">
+	<div style="display: inline-block" data-bind="tooltip: 'SETTINGS_OPEN_PGP/GENERATE_ONLY_HTTPS'">
 		<button class="btn" data-bind="click: generateOpenPgpKey">
 			<i class="icon-key"></i>
 			&nbsp;&nbsp;

rainloop/v/0.0.0/app/templates/Views/User/SystemDropDown.html

@@ -81,7 +81,7 @@
 				</ul>
 			</div>
 			<div class="accountPlace pull-right hide-on-mobile" data-bind="text: emailTitle()"></div>
-			<div class="audioPlace pull-right" data-tooltip-i18n="off" data-tooltip-mobile="on" data-tooltip-join="right top"
+			<div class="audioPlace pull-right" data-tooltip-i18n="off"
 					data-bind="visible: '' !== currentAudio(), tooltip: currentAudio, click: stopPlay">
 				<div class="playIcon equaliser" data-bind="css: {'animated': '' !== currentAudio()}">
 					<div class="bar first"></div>
@@ -92,7 +92,7 @@
 			</div>
 
 			<div class="logoPlace pull-right" data-bind="if: logoImg">
-				<img style="height: 99%" data-tooltip-i18n="off" data-tooltip-mobile="on" data-tooltip-join="right"
+				<img style="height: 99%" data-tooltip-i18n="off"
 					data-bind="attr: { 'src': logoImg }, tooltip: logoTitle" />
 			</div>
 

vendors/inputosaurus/inputosaurus.css

@@ -1,67 +1,84 @@
 .inputosaurus-container {
-	background-color:#fff;
+	background-color: #fff;
-	border:1px solid #bcbec0;
+	border: 1px solid #ccc;
-	margin:0 5px 0 0;
+	border-radius: 3px;
-	padding:0 3px;
+	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-	display : inline-block;
+	box-sizing: border-box;
-	cursor:text;
+	cursor: text;
-	font-size : 14px;
+	font-size: 90%;
-	font-family : "Helvetica Neue", Helvetica, Arial, sans-serif;
+	list-style: none;
+	margin: 0 5px 0 0;
+	padding: 0;
+	transition: border linear .2s, box-shadow linear .2s;
 }
+
 .inputosaurus-container li {
-	display : block;
+	display: inline-block;
-	float : left;
+}
-	overflow: hidden;
+.inputosaurus-container li[draggable] {
-	margin : 2px 2px 0;
+	background-color: #eee;
-	padding : 2px 3px;
+	border: 1px solid #aaa;
-	white-space : nowrap;
+	border-radius: 2px;
-	overflow : hidden;
-	text-overflow:ellipsis;
-	-o-text-overflow:ellipsis;
-	-ms-text-overflow:ellipsis;
-	background-color:#e5eff7;
-	border:#a9cae4 solid 1px;
-	-webkit-border-radius:2px;
-	-moz-border-radius:2px;
-	border-radius:2px;
-	color:#5b9bcd;
-	-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
-	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
 	box-shadow: 0 1px 0 rgba(255,255,255,0.75) inset;
-	line-height : 20px;
+	color: #555;
 	cursor: default;
+	max-width: 500px;
+	overflow: hidden;
+	margin: 2px;
+	padding: 2px 15px 2px 5px;
+	position: relative;
+	text-overflow: ellipsis;
+	vertical-align: middle;
+	white-space: nowrap;
 }
-.inputosaurus-container li.inputosaurus-selected { background-color:#bdd6eb; }
+
+.inputosaurus-container li.pgp {
+	background-color: #E5F3E2;
+}
+
+.inputosaurus-container li span {
+	padding-right: 3px;
+}
+
 .inputosaurus-container li a {
-	font-size:16px;
+    font-size: 12px;
-	color:#5b9bcd;
+    color: #999;
-	padding : 1px;
+	outline: 0;
-	text-decoration : none;
+	padding: 1px;
-	outline : none;
+    position: absolute;
+    right: 2px;
+	text-decoration: none;
+    top: 1px;
 }
+.inputosaurus-container li a:hover {
+	color: #666;
+}
+
 .inputosaurus-container .inputosaurus-input {
-	border:none;
+	margin: 0 2px;
+	padding: 0;
+}
+
+.inputosaurus-container input[type="text"],
+.inputosaurus-container input[type="text"]:focus,
+.inputosaurus-container input[type="text"]:hover {
+	border: 0;
 	box-shadow: none;
-	background-color:#fff;
+	height: 24px;
-	margin-top : 3px;
+	margin: 0;
+	outline: 0;
+	padding: 0;
+	vertical-align: baseline;
 }
-.inputosaurus-container .inputosaurus-input input {
+
-	border:none;
+.inputosaurus-container li.inputosaurus-selected,
-	height : 23px;
+.inputosaurus-container li.inputosaurus-selected a {
-	font-size : 14px;
+	background-color: Highlight;
-	line-height : 20px;
+	color: HighlightText;
-	color : #555;
-	margin : 0;
-	outline : none;
-	padding : 0 0 1px 1px;
-	width : 25px;
-	-webkit-box-shadow:none;
-	-moz-box-shadow:none;
-	box-shadow:none;
 }
-.inputosaurus-container .inputosaurus-input input:hover {
+
-	-webkit-box-shadow:none;
+.inputosaurus-fake-span {
-	-moz-box-shadow:none;
+	position: absolute;
-	box-shadow:none;
+	top: 0;
+	left: -5000px;
 }
-.inputosaurus-input-hidden { display:none; }