Drop bootstrap modal.less by using <dialog> <header> and <footer>

https://snappymail.eu/demo/ updated for testing

dev/Knoin/AbstractViews.js

@@ -2,7 +2,7 @@ import ko from 'ko';
 
 import { inFocus, addObservablesTo, addComputablesTo, addSubscribablesTo } from 'Common/Utils';
 import { Scope } from 'Common/Enums';
-import { keyScope } from 'Common/Globals';
+import { keyScope, Settings } from 'Common/Globals';
 import { ViewType } from 'Knoin/Knoin';
 
 class AbstractView {
@@ -12,6 +12,7 @@ class AbstractView {
 		this.viewModelTemplateID = templateID;
 		this.viewType = type;
 		this.viewModelDom = null;
+		this.viewNoUserSelect = false;
 
 		this.keyScope = {
 			scope: Scope.None,
@@ -122,3 +123,23 @@ export class AbstractViewSettings
 	viewModelDom
 }
 */
+
+export class AbstractViewLogin extends AbstractViewCenter {
+	constructor(templateID) {
+		super(templateID);
+		this.hideSubmitButton = Settings.app('hideSubmitButton');
+		this.formError = ko.observable(false).extend({ falseTimeout: 500 });
+	}
+
+	onBuild(dom) {
+		dom.classList.add('LoginView');
+	}
+
+	onShow() {
+		rl.route.off();
+	}
+
+	submitForm() {
+//		return false;
+	}
+}

dev/Knoin/Knoin.js

@@ -32,21 +32,48 @@ const
 			let vmDom = null;
 			const vm = new ViewModelClass(vmScreen),
 				position = vm.viewType || '',
+				dialog = ViewType.Popup === position,
 				vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null;
 
 			ViewModelClass.__builded = true;
 			ViewModelClass.__vm = vm;
 
 			if (vmPlace) {
-				vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.viewModelTemplateID + '" hidden=""></div>');
+				vmDom = dialog
+					? Element.fromHTML('<dialog id="V-'+ vm.viewModelTemplateID + '"></dialog>')
+					: Element.fromHTML('<div id="V-'+ vm.viewModelTemplateID + '" hidden=""></div>');
 				vmPlace.append(vmDom);
 
 				vm.viewModelDom = vmDom;
 				ViewModelClass.__dom = vmDom;
 
+				if (vm.viewNoUserSelect) {
+					vmDom.classList.add('g-ui-user-select-none');
+				}
+
 				if (ViewType.Popup === position) {
 					vm.cancelCommand = vm.closeCommand = createCommand(() => hideScreenPopup(ViewModelClass));
 
+					// Firefox / Safari HTMLDialogElement not defined
+					if (!vmDom.showModal) {
+						vmDom.classList.add('polyfill');
+						vmDom.showModal = () => {
+							if (!vmDom.backdrop) {
+								vmDom.before(vmDom.backdrop = Element.fromHTML('<div class="dialog-backdrop"></div>'));
+							}
+							vmDom.setAttribute('open','');
+							vmDom.open = true;
+							vmDom.returnValue = null;
+							vmDom.backdrop.hidden = false;
+						};
+						vmDom.close = v => {
+							vmDom.backdrop.hidden = true;
+							vmDom.returnValue = v;
+							vmDom.removeAttribute('open', null);
+							vmDom.open = false;
+						};
+					}
+
 					// show/hide popup/modal
 					const endShowHide = e => {
 						if (e.target === vmDom) {
@@ -54,7 +81,7 @@ const
 								autofocus(vmDom);
 								vm.onShowWithDelay && vm.onShowWithDelay();
 							} else {
-								vmDom.hidden = true;
+								vmDom.close();
 								vm.onHideWithDelay && vm.onHideWithDelay();
 							}
 						}
@@ -63,10 +90,12 @@ const
 					vm.modalVisibility.subscribe(value => {
 						if (value) {
 							visiblePopups.add(vm);
-							vmDom.style.zIndex = 3000 + visiblePopups.size + 10;
+							vmDom.style.zIndex = 3000 + (visiblePopups.size * 2);
-							vmDom.hidden = false;
+							vmDom.showModal();
+							if (vmDom.backdrop) {
+								vmDom.backdrop.style.zIndex = 3000 + visiblePopups.size;
+							}
 							vm.keyScope.set();
-							arePopupsVisible(true);
 							requestAnimationFrame(() => { // wait just before the next paint
 								vmDom.offsetHeight; // force a reflow
 								vmDom.classList.add('show'); // trigger the transitions
@@ -74,11 +103,10 @@ const
 						} else {
 							visiblePopups.delete(vm);
 							vm.onHide && vm.onHide();
-							vmDom.classList.remove('show');
 							vm.keyScope.unset();
-							arePopupsVisible(0 < visiblePopups.size);
+							vmDom.classList.remove('show'); // trigger the transitions
 						}
-						vmDom.setAttribute('aria-hidden', !value);
+						arePopupsVisible(0 < visiblePopups.size);
 /*
 						// the old ko.bindingHandlers.modal
 						const close = vmDom.querySelector('.close'),

dev/Screen/User/MailBox.js

@@ -1,6 +1,6 @@
 import { Scope } from 'Common/Enums';
 import { Layout, ClientSideKeyName } from 'Common/EnumsUser';
-import { doc, leftPanelDisabled, moveAction, Settings } from 'Common/Globals';
+import { doc, leftPanelDisabled, moveAction, Settings, elementById } from 'Common/Globals';
 import { pString, pInt } from 'Common/Utils';
 import { setLayoutResizer } from 'Common/UtilsUser';
 import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
@@ -104,8 +104,8 @@ export class MailBoxUserScreen extends AbstractScreen {
 	onBuild() {
 		setTimeout(() => {
 			// initMailboxLayoutResizer
-			const top = doc.querySelector('.RL-MailMessageList'),
+			const top = elementById('V-MailMessageList'),
-				bottom = doc.querySelector('.RL-MailMessageView'),
+				bottom = elementById('V-MailMessageView'),
 				fToggle = () => {
 					let layout = SettingsUserStore.layout();
 					setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize,

dev/Stores/User/App.js

@@ -1,5 +1,5 @@
 import { Scope } from 'Common/Enums';
-import { doc, keyScope, leftPanelDisabled, SettingsGet } from 'Common/Globals';
+import { keyScope, leftPanelDisabled, SettingsGet, elementById } from 'Common/Globals';
 import { addObservablesTo } from 'Common/Utils';
 import { ThemeStore } from 'Stores/Theme';
 
@@ -25,7 +25,7 @@ AppUserStore.focusedState.subscribe(value => {
 			break;
 	}
 	['FolderList','MessageList','MessageView'].forEach(name => {
-		let dom = doc.querySelector('.RL-Mail'+name);
+		let dom = elementById('V-Mail'+name);
 		dom && dom.classList.toggle('focused', name === value);
 	});
 });

dev/Styles/@Admin.less

@@ -14,7 +14,6 @@
 @import "../../vendors/bootstrap/less/buttons.less";
 @import "../../vendors/bootstrap/less/button-groups.less";
 @import "../../vendors/bootstrap/less/alerts.less";
-@import "../../vendors/bootstrap/less/modals.less";
 @import "../../vendors/bootstrap/less/utilities.less";
 @import "../../vendors/bootstrap/less/wells.less";
 

dev/Styles/@Main.less

@@ -14,7 +14,6 @@
 @import "../../vendors/bootstrap/less/buttons.less";
 @import "../../vendors/bootstrap/less/button-groups.less";
 @import "../../vendors/bootstrap/less/alerts.less";
-@import "../../vendors/bootstrap/less/modals.less";
 @import "../../vendors/bootstrap/less/utilities.less";
 @import "../../vendors/bootstrap/less/navs.less";
 

dev/Styles/Admin/Domain.less

@@ -1,18 +1,14 @@
-.b-domain-alias-content {
+#V-PopupsDomainAlias {
-	&.modal {
 	max-width: 330px;
-	}
 
 	.error-desc {
 		color: red;
 	}
 }
 
-.b-domain-content {
+#V-PopupsDomain {
 
-	&.modal {
 	max-width: 810px;
-	}
 
 	.domain-desc {
 		color: #666;

dev/Styles/Admin/Layout.less

@@ -91,17 +91,6 @@
 	padding-right: 12px;
 }
 
-#rl-popups > .rl-view-model {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 1100;
-	overflow: auto;
-	background-color: rgba(0,0,0,0.3);
-}
-
 #rl-settings-subscreen {
 	padding: 20px;
 }

dev/Styles/Admin/Plugin.less

@@ -1,8 +1,6 @@
-.b-plugin-content {
+#V-PopupsPlugin {
 
-	&.modal {
 	max-width: 660px;
-	}
 
 	.modal-body {
 		overflow: auto;

dev/Styles/Animations.less

@@ -18,22 +18,22 @@
 
 @media screen and (min-width: 1000px) {
 
-	html.rl-started-trigger .b-login-content {
+	html.rl-started-trigger .LoginView {
 		/*transform: scale(1.1);*/
 		transform: translateY(-20px);
 		opacity: 0.5;
 	}
 
-	.b-login-content .errorAnimated {
+	.LoginView .errorAnimated {
 		animation: login-form-shake 400ms ease-in-out;
 	}
 
-	.b-login-content .errorAnimated .buttonLogin {
+	.LoginView .errorAnimated .buttonLogin {
 		color: #b94a48;
 		font-weight: bold;
 	}
 
-	.b-login-content {
+	.LoginView {
 		transition: all 0.3s ease-out;
 	}
 
@@ -41,23 +41,4 @@
 		transition: all 0.2s linear;
 	}
 
-	#rl-popups > .rl-view-model .modal {
-		transition: all .2s ease-out;
-	}
-	#rl-popups > .rl-view-model:not(.show) .modal {
-		top: -25%;
-	}
-	#rl-popups > .rl-view-model .modal.fade {
-		opacity: 1;
-	}
-	#rl-popups > .rl-view-model:not(.show) .modal.fade {
-		opacity: 0;
-	}
-}
-
-#rl-popups > .rl-view-model {
-	transition: background-color 0.2s linear;
-}
-#rl-popups > .rl-view-model:not(.show) {
-	background-color: rgba(0,0,0,0);
 }

dev/Styles/Ask.less

@@ -1,4 +1,4 @@
-.b-ask-content {
+#V-PopupsAsk {
 
 	.modal-body {
 		font-size: 18px;

dev/Styles/Languages.less

@@ -1,8 +1,6 @@
-.b-languages-content {
+#V-PopupsLanguages {
 
-	&.modal {
+	max-width: 710px;
-		max-width: 700px;
-	}
 
 	label {
 		display: inline-block;
@@ -37,7 +35,7 @@
 }
 
 @media screen and (max-width: 999px) {
-	.b-languages-content label {
+	#V-PopupsLanguages label {
 		width: calc(100% - 40px);
 	}
 }

dev/Styles/Login.less

@@ -1,4 +1,4 @@
-.RL-Login, .RL-AdminLogin {
+#V-Login, #V-AdminLogin {
 	position: fixed;
 	left: 50%;
 	top: 50%;
@@ -13,7 +13,7 @@
 @glass-error-color: #f76260;
 @glass-m-color: rgba(255, 255, 255, .8);
 
-.b-login-content {
+.LoginView {
 
 	position: relative;
 
@@ -163,7 +163,7 @@
 }
 
 @media screen and (max-width: 480px) {
-	.b-login-content {
+	.LoginView {
 		form {
 			padding: 30px 4vw 10px;
 		}

dev/Styles/Ui.less

@@ -124,3 +124,96 @@ textarea + .settings-save-trigger {
 .tabs [id^="tab"]:checked + label + .tab-content {
 	visibility: visible;
 }
+
+.dialog-backdrop {
+	background: rgba(0,0,0,0.5);
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	z-index: 1;
+/*
+	position: fixed;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background: rgba(0,0,0,0.5);
+
+	z-index: 1000000000;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1100;
+	overflow: auto;
+	background-color: rgba(0,0,0,0.3);
+*/
+}
+
+dialog {
+	border: 0;
+	background-color: @white;
+	border: 1px solid rgba(0,0,0,.3);
+	border-radius: 6px;
+	box-shadow: 0 5px 80px rgba(0,0,0,0.3);
+	margin: 10px auto;
+	max-height: calc(100vh - 20px);
+	max-width: 560px;
+	overflow: auto;
+	padding: 0;
+	transition: all .2s ease-out;
+	top: 0;
+	width: calc(100% - 20px);
+}
+dialog:not([open]) {
+	display: none !important;
+}
+dialog.show {
+	opacity: 1;
+}
+dialog:not(.show) {
+	background-color: rgba(0,0,0,0);
+	opacity: 0;
+	top: -25%;
+}
+
+dialog header {
+  padding: 9px 15px;
+  border-bottom: 1px solid #eee;
+  // Close icon
+  .close { margin-top: 2px; }
+  // Heading
+  h3 {
+    margin: 0;
+    line-height: 30px;
+  }
+}
+
+// Body (where all modal content resides)
+dialog .modal-body {
+  overflow-y: auto;
+  padding: 15px;
+}
+
+// Footer (for actions)
+dialog footer {
+  padding: 14px 15px 15px;
+  margin-bottom: 0;
+  text-align: right; // right align buttons
+  border-top: 1px solid #ddd;
+  border-radius: 0 0 6px 6px;
+  .clearfix(); // clear it in case folks use .pull-* classes on buttons
+
+  // Properly space out buttons
+  .btn + .btn {
+    margin-left: 5px;
+    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+  }
+  // but override that for button groups
+  .btn-group .btn + .btn {
+    margin-left: -1px;
+  }
+}

dev/Styles/User/AdvancedSearch.less

@@ -1,7 +1,7 @@
-.b-advanced-search-content {
+#V-PopupsAdvancedSearch {
-	&.modal {
+
 	max-width: 780px;
-	}
+
 	.control-label {
 		width: 110px;
 	}

dev/Styles/User/Animations.less

@@ -34,7 +34,7 @@
 		}
 	}
 
-	.b-compose.loading .b-header-toolbar {
+	#V-PopupsCompose header.loading {
 		background-size: 60px 60px;
 		background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%,
 			transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%,

dev/Styles/User/Compose.less

@@ -1,13 +1,10 @@
 
-.b-compose {
+#V-PopupsCompose {
-
-	&.modal {
 	display: flex;
 	flex-direction: column;
 	height: calc(100% - 52px);
 	max-width: 1000px;
 	width: 98%;
-	}
 
 	.modal-body {
 		padding: 0;
@@ -32,6 +29,13 @@
 		border-top: 1px solid #ccc;
 		overflow-y: auto;
 		padding: 10px;
+	}
+
+	.attachmentName {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
 
 	.no-attachments-desc {
 		padding-top: 50px;
@@ -41,13 +45,7 @@
 		text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 	}
 
-		.attachmentList {
+	header {
-			margin: 0;
-			padding: 10px;
-		}
-	}
-
-	.b-header-toolbar {
 
 		background-color: rgba(0,0,0,0.8);
 
@@ -160,7 +158,7 @@
 }
 
 @media screen and (max-width: 999px) {
-	.b-compose.modal {
+	#V-PopupsCompose {
 		border: 0;
 		width: 100%;
 	}

dev/Styles/User/Contacts.less

@@ -1,22 +1,20 @@
 
 @contacts-popup-left-width: 25%;
 
-.RL-PopupsContacts {
+#V-PopupsContacts {
 
-	.control-group {
-		.control-label {
-			padding-top: 0;
-			width: 50px;
-		}
-	}
-
-	.modal {
 	bottom: 0;
 	width: auto;
 	min-width: 550px;
 	max-width: 900px;
 	min-height: 300px;
 	max-height: 700px;
+
+	.control-group {
+		.control-label {
+			padding-top: 0;
+			width: 50px;
+		}
 	}
 
 	.modal-body {

dev/Styles/User/Filter.less

@@ -1,4 +1,4 @@
-.b-filter-content {
+#V-PopupsFilter {
 
 	max-width: 750px;
 

dev/Styles/User/Identity.less

@@ -1,8 +1,6 @@
-.b-identity-content {
+#V-PopupsIdentity {
 
-	&.modal {
 	max-width: 770px;
-	}
 
 	.modal-body {
 		overflow: hidden;

dev/Styles/User/Layout.less

@@ -75,7 +75,7 @@ html:not(.rl-left-panel-disabled) #rl-left {
 }
 
 #rl-left > .resizer,
-.rl-side-preview-pane .RL-MailMessageList > .resizer {
+.rl-side-preview-pane #V-MailMessageList > .resizer {
 	cursor: ew-resize;
 	height: 100%;
 	right: 0;
@@ -83,17 +83,17 @@ html:not(.rl-left-panel-disabled) #rl-left {
 	width: 5px;
 }
 
-.rl-side-preview-pane .RL-MailMessageList {
+.rl-side-preview-pane #V-MailMessageList {
 	resize: horizontal;
 	min-width: 320px;
 	max-width: 60%;
 }
-.rl-bottom-preview-pane .RL-MailMessageList {
+.rl-bottom-preview-pane #V-MailMessageList {
 	resize: vertical;
 	min-height: 200px;
 	max-height: 60%;
 }
-.rl-bottom-preview-pane .RL-MailMessageList > .resizer {
+.rl-bottom-preview-pane #V-MailMessageList > .resizer {
 	cursor: ns-resize;
 	height: 5px;
 	left: 0;
@@ -102,11 +102,11 @@ html:not(.rl-left-panel-disabled) #rl-left {
 }
 
 html:not(.rl-left-panel-disabled) #rl-left > .resizer,
-.RL-MailMessageList > .resizer {
+#V-MailMessageList > .resizer {
 	display: block;
 }
 
-.RL-MailMessageList {
+#V-MailMessageList {
 	position: absolute;
 	top: 0;
 	bottom: @rlBottomMargin;
@@ -114,7 +114,7 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
 	width: 50%;
 }
 
-.RL-MailMessageView {
+#V-MailMessageView {
 	position: absolute;
 	top: 50px + @rlLowMargin;
 	bottom: 13px;
@@ -148,30 +148,11 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
 }
 
 html.rl-side-preview-pane {
-	.RL-MailMessageView {
+	#V-MailMessageView {
 		left: 50%;
 	}
 }
 
-/*
-	#rl-popups > dialog {
-		top: 0;
-		margin: 10px auto;
-		padding: 0;
-		border: 0;
-	}
-*/
-#rl-popups > .rl-view-model {
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	z-index: 1100;
-	overflow: auto;
-	background-color: rgba(0,0,0,0.3);
-}
-
 #rl-settings-subscreen {
 	padding:20px;
 }
@@ -256,12 +237,12 @@ html.rl-side-preview-pane {
 		left: @rlLeftWidth + 20;
 	}
 
-	.RL-MailMessageList {
+	#V-MailMessageList {
 		width: 40%;
 	}
 
 	html.rl-side-preview-pane {
-		.RL-MailMessageView {
+		#V-MailMessageView {
 			left: 40%;
 		}
 	}
@@ -317,7 +298,7 @@ html.rl-left-panel-disabled {
 
 html.rl-no-preview-pane {
 
-	.RL-MailMessageList {
+	#V-MailMessageList {
 		right: @rlBottomMargin !important;
 		width: inherit;
 	}
@@ -331,14 +312,14 @@ html.rl-no-preview-pane #rl-right .resizer {
 
 html.rl-bottom-preview-pane {
 
-	.RL-MailMessageList {
+	#V-MailMessageList {
 		bottom: inherit;
 		width: inherit;
 		height: 300px;
 		right: 0;
 	}
 
-	.RL-MailMessageView {
+	#V-MailMessageView {
 		left: 0;
 		top: 356px;
 	}

dev/Styles/User/MessageList.less

@@ -1,12 +1,12 @@
 
 html.rl-mobile,
 html.rl-no-preview-pane {
-	.message-selected .RL-MailMessageList {
+	.message-selected #V-MailMessageList {
 		display: none;
 	}
 }
 
-.RL-MailMessageList.focused .messageList {
+#V-MailMessageList.focused .messageList {
 	border-color: #9d9d9d;
 }
 
@@ -15,7 +15,7 @@ html.rl-no-preview-pane {
 	padding-right: 6px;
 }
 
-.RL-MailMessageList .btn-toolbar {
+#V-MailMessageList .btn-toolbar {
 	height: 30px;
 	padding: 10px 1px;
 	white-space: nowrap;
@@ -42,15 +42,13 @@ html.rl-no-preview-pane {
 		border-top: 1px solid #bbb;
 
 		.e-quota {
+			border-bottom: 1px dashed #333;
 			display: inline-block;
 			margin-top: 5px;
 			margin-left: 5px;
 			font-size: 18px;
 			cursor: help;
 		}
-		.e-quota:hover {
-			border-bottom: 1px dashed #333;
-		}
 	}
 
 	.btn.buttonMoreSearch {

dev/Styles/User/MessageView.less

@@ -1,11 +1,11 @@
 
 html.rl-no-preview-pane {
-	#rl-right:not(.message-selected) .RL-MailMessageView {
+	#rl-right:not(.message-selected) #V-MailMessageView {
 		display: none;
 	}
 }
 
-.RL-MailMessageView.focused .messageView {
+#V-MailMessageView.focused .messageView {
 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 	border-color: darken(@rlMainDarkColor, 5%);
 }
@@ -501,10 +501,10 @@ html.rl-message-fullscreen {
 	}
 
 	#rl-right {
-		.RL-MailMessageList,
+		#V-MailMessageList,
-		.RL-SettingsPane,
+		#V-SettingsPane,
-		.RL-SystemDropDown,
+		#V-SystemDropDown,
-		.RL-MailMessageView .messageView .toolbar {
+		#V-MailMessageView .messageView .toolbar {
 			display: none !important;
 		}
 	}

dev/Styles/User/OpenPgpKey.less

@@ -1,20 +1,16 @@
-.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content {
+#V-PopupsViewOpenPgpKey, #V-PopupsNewOpenPgpKey {
-	&.modal {
 	max-width: 570px;
-	}
 }
 
-.b-open-pgp-key-view-content {
+#V-PopupsViewOpenPgpKey {
 	.key-viewer {
 		max-height: 500px;
 		overflow: auto;
 	}
 }
 
-.b-compose-open-pgp-content {
+#V-PopupsComposeOpenPgp {
-	&.modal {
 	max-width: 800px;
-	}
 
 	.key-list {
 
@@ -95,10 +91,8 @@
 	}
 }
 
-.b-message-open-pgp-content {
+#V-PopupsMessageOpenPgp {
-	&.modal {
 	max-width: 700px;
-	}
 
 	.key-list {
 
@@ -132,10 +126,9 @@
 	}
 }
 
-.b-open-pgp-key-add-content {
+#V-PopupsAddOpenPgpKey {
-	&.modal {
 	max-width: 645px;
-	}
+
 	.inputKey {
 		font-family: var(--fontMono);
 		width: 600px;

dev/Styles/User/SettingsFilters.less

@@ -1,10 +1,10 @@
 
-.b-filter-script {
+#V-PopupsSieveScript {
 	width: auto;
 	max-width: 720px;
 }
 
-.b-filter-script .filter-item,
+#V-PopupsSieveScript .filter-item,
 .b-settings-filters .script-item {
 	white-space: nowrap;
 }
@@ -30,7 +30,7 @@
 	color: #aaa;
 }
 
-.b-filter-script textarea {
+#V-PopupsSieveScript textarea {
 	height: 300px;
 	font-family: var(--fontMono);
 }

dev/Styles/User/Shortcuts.less

@@ -1,7 +1,5 @@
-.b-shortcuts-content {
+#V-PopupsKeyboardShortcutsHelp {
-	&.modal {
 	max-width: 700px;
-	}
 
 	td[class^="icon-"] {
 		display: table-cell;

dev/Styles/User/SquireUI.less

@@ -175,14 +175,14 @@ Secondly, we can't rely on MUA's what to do with :empty
 	}
 }
 
-.rl-mobile .b-compose.modal,
+.rl-mobile #V-PopupsCompose,
-.rl-mobile .b-identity-content.modal {
+.rl-mobile #V-PopupsIdentity {
 	margin-bottom: 50px;
 }
-.rl-mobile .b-compose.modal {
+.rl-mobile #V-PopupsCompose {
 	min-height: calc(100% - 62px);
 }
 
-.RL-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode {
+#V-PopupsCompose[data-wysiwyg*=Forced] #squire-toolgroup-mode {
 	display: none;
 }

dev/Styles/User/SystemDropDown.less

@@ -10,7 +10,7 @@
 	top: 40px;
 }
 
-.RL-SystemDropDown {
+#V-SystemDropDown {
 
 	position: absolute;
 	top: 0;

dev/View/Admin/Login.js

@@ -1,19 +1,14 @@
-import ko from 'ko';
-
-import { Settings } from 'Common/Globals';
 import { getNotification } from 'Common/Translator';
 
 import Remote from 'Remote/Admin/Fetch';
 
 import { decorateKoCommands } from 'Knoin/Knoin';
-import { AbstractViewCenter } from 'Knoin/AbstractViews';
+import { AbstractViewLogin } from 'Knoin/AbstractViews';
 
-class LoginAdminView extends AbstractViewCenter {
+class LoginAdminView extends AbstractViewLogin {
 	constructor() {
 		super('AdminLogin');
 
-		this.hideSubmitButton = Settings.app('hideSubmitButton');
-
 		this.addObservables({
 			login: '',
 			password: '',
@@ -26,8 +21,6 @@ class LoginAdminView extends AbstractViewCenter {
 			submitError: ''
 		});
 
-		this.formError = ko.observable(false).extend({ falseTimeout: 500 });
-
 		this.addSubscribables({
 			login: () => this.loginError(false),
 			password: () => this.passwordError(false)
@@ -67,14 +60,6 @@ class LoginAdminView extends AbstractViewCenter {
 
 		return valid;
 	}
-
-	onShow() {
-		rl.route.off();
-	}
-
-	submitForm() {
-//		return false;
-	}
 }
 
 export { LoginAdminView };

dev/View/Popup/Account.js

@@ -8,6 +8,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class AccountPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Account');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			isNew: true,

dev/View/Popup/AddOpenPgpKey.js

@@ -6,6 +6,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class AddOpenPgpKeyPopupView extends AbstractViewPopup {
 	constructor() {
 		super('AddOpenPgpKey');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			key: '',

dev/View/Popup/AdvancedSearch.js

@@ -11,6 +11,7 @@ import { FolderUserStore } from 'Stores/User/Folder';
 class AdvancedSearchPopupView extends AbstractViewPopup {
 	constructor() {
 		super('AdvancedSearch');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			from: '',

dev/View/Popup/Ask.js

@@ -7,6 +7,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class AskPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Ask');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			askDesc: '',

dev/View/Popup/ComposeOpenPgp.js

@@ -18,6 +18,7 @@ const KEY_NAME_SUBSTR = -8,
 class ComposeOpenPgpPopupView extends AbstractViewPopup {
 	constructor() {
 		super('ComposeOpenPgp');
+		this.viewNoUserSelect = true;
 
 		this.publicKeysOptionsCaption = i18nPGP('ADD_A_PUBLICK_KEY');
 		this.privateKeysOptionsCaption = i18nPGP('SELECT_A_PRIVATE_KEY');

dev/View/Popup/Domain.js

@@ -11,6 +11,7 @@ import { DomainAdminStore } from 'Stores/Admin/Domain';
 class DomainPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Domain');
+		this.viewNoUserSelect = true;
 
 		this.addObservables(this.getDefaults());
 		this.addObservables({

dev/View/Popup/Filter.js

@@ -16,6 +16,7 @@ import { folderListOptionsBuilder } from 'Common/UtilsUser';
 class FilterPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Filter');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			isNew: true,

dev/View/Popup/FolderClear.js

@@ -11,6 +11,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class FolderClearPopupView extends AbstractViewPopup {
 	constructor() {
 		super('FolderClear');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			selectedFolder: null,

dev/View/Popup/FolderCreate.js

@@ -15,6 +15,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class FolderCreatePopupView extends AbstractViewPopup {
 	constructor() {
 		super('FolderCreate');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			folderName: '',

dev/View/Popup/FolderSystem.js

@@ -13,6 +13,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class FolderSystemPopupView extends AbstractViewPopup {
 	constructor() {
 		super('FolderSystem');
+		this.viewNoUserSelect = true;
 
 		this.sChooseOnText = '';
 		this.sUnuseText = '';

dev/View/Popup/Languages.js

@@ -7,6 +7,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class LanguagesPopupView extends AbstractViewPopup {
 	constructor() {
 		super('Languages');
+		this.viewNoUserSelect = true;
 
 		this.fLang = null;
 		this.userLanguage = ko.observable('');

dev/View/Popup/MessageOpenPgp.js

@@ -9,6 +9,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class MessageOpenPgpPopupView extends AbstractViewPopup {
 	constructor() {
 		super('MessageOpenPgp');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			notification: '',

dev/View/Popup/NewOpenPgpKey.js

@@ -8,6 +8,7 @@ import { AbstractViewPopup } from 'Knoin/AbstractViews';
 class NewOpenPgpKeyPopupView extends AbstractViewPopup {
 	constructor() {
 		super('NewOpenPgpKey');
+		this.viewNoUserSelect = true;
 
 		this.addObservables({
 			email: '',

dev/View/Popup/SieveScript.js

@@ -16,6 +16,7 @@ import { FilterPopupView } from 'View/Popup/Filter';
 class SieveScriptPopupView extends AbstractViewPopup {
 	constructor() {
 		super('SieveScript');
+		this.viewNoUserSelect = true;
 
 		addObservablesTo(this, {
 			saveError: false,

dev/View/User/Login.js

@@ -1,8 +1,6 @@
-import ko from 'ko';
-
 import { Notification } from 'Common/Enums';
 import { ClientSideKeyName } from 'Common/EnumsUser';
-import { Settings, SettingsGet } from 'Common/Globals';
+import { SettingsGet } from 'Common/Globals';
 import { getNotification, translatorReload, convertLangName } from 'Common/Translator';
 
 import { LanguageStore } from 'Stores/Language';
@@ -12,7 +10,7 @@ import * as Local from 'Storage/Client';
 import Remote from 'Remote/User/Fetch';
 
 import { decorateKoCommands, showScreenPopup } from 'Knoin/Knoin';
-import { AbstractViewCenter } from 'Knoin/AbstractViews';
+import { AbstractViewLogin } from 'Knoin/AbstractViews';
 
 import { LanguagesPopupView } from 'View/Popup/Languages';
 
@@ -21,12 +19,10 @@ const SignMeOff = 0,
 	SignMeUnused = 2;
 
 
-class LoginUserView extends AbstractViewCenter {
+class LoginUserView extends AbstractViewLogin {
 	constructor() {
 		super('Login');
 
-		this.hideSubmitButton = Settings.app('hideSubmitButton');
-
 		this.addObservables({
 			loadingDesc: SettingsGet('LoadingDescription'),
 
@@ -46,8 +42,6 @@ class LoginUserView extends AbstractViewCenter {
 			signMeType: SignMeUnused
 		});
 
-		this.formError = ko.observable(false).extend({ falseTimeout: 500 });
-
 		this.allowLanguagesOnLogin = !!SettingsGet('AllowLanguagesOnLogin');
 
 		this.language = LanguageStore.language;
@@ -129,11 +123,9 @@ class LoginUserView extends AbstractViewCenter {
 		return valid;
 	}
 
-	onShow() {
+	onBuild(dom) {
-		rl.route.off();
+		super.onBuild(dom);
-	}
 
-	onBuild() {
 		const signMeLocal = Local.get(ClientSideKeyName.LastSignMe),
 			signMe = (SettingsGet('SignMe') || '').toLowerCase();
 
@@ -161,10 +153,6 @@ class LoginUserView extends AbstractViewCenter {
 		}
 	}
 
-	submitForm() {
-//		return false;
-	}
-
 	selectLanguage() {
 		showScreenPopup(LanguagesPopupView, [this.language, this.languages(), LanguageStore.userLanguage()]);
 	}

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

@@ -1,9 +1,8 @@
-<div class="b-login-content">
+<div class="alert" data-bind="hidden: !submitError()">
-	<div class="alert" data-bind="hidden: !submitError()">
 	<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
 	<span data-bind="text: submitError"></span>
-	</div>
+</div>
-	<form action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
+<form action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
 	<div class="controls" data-bind="css: {'error': loginError}">
 		<div class="input-append">
 			<input required="" type="text" class="input-block-level inputIcon"
@@ -37,5 +36,4 @@
 			data-bind="command: submitCommand"
 			data-i18n="LOGIN/BUTTON_LOGIN"></button>
 	</div>
-	</form>
+</form>
-<div>

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

@@ -1,9 +1,8 @@
-<div class="modal fade b-domain-content g-ui-user-select-none"
+<div data-bind="css: {'domain-edit': edit}">
-	data-bind="css: {'domain-edit': edit}">
+	<header>
-	<div class="modal-header">
 		<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 		<h3 data-bind="text: headerText"></h3>
-	</div>
+	</header>
 	<div class="modal-body">
 		<div class="row" data-bind="visible: !edit()" style="margin-bottom: 20px;">
 			<div class="span5">
@@ -187,7 +186,7 @@
 			</div>
 		</form>
 	</div>
-	<div class="modal-footer">
+	<footer>
 		<a class="btn button-test-connection pull-left" data-bind="command: testConnectionCommand, css: {
 		   'btn-success': testingDone() && !testingImapError() && !testingSmtpError(),
 		   'btn-danger': testingDone() && (testingImapError() || testingSmtpError()) }">
@@ -206,5 +205,5 @@
 			<i class="fontastic" data-bind="css: {'icon-spinner': saving()}">✚</i>
 			<span data-i18n="POPUPS_DOMAIN/BUTTON_ADD"></span>
 		</a>
-	</div>
+	</footer>
 </div>

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

@@ -1,9 +1,8 @@
-<div class="modal fade b-domain-alias-content">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_DOMAIN_ALIAS/TITLE_ADD_DOMAIN_ALIAS"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="control-group" data-bind="css: {error: '' !== savingError()}">
 		<label class="control-label" data-i18n="POPUPS_DOMAIN_ALIAS/LABEL_ALIAS"></label>
 		<div class="controls">
@@ -32,8 +31,8 @@
 			}
 		}"></div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonClose" data-bind="command: cancelCommand">
 		<i class="fontastic">✖</i>
 		<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_CLOSE"></span>
@@ -43,5 +42,4 @@
 		<i class="icon-spinner" data-bind="visible: saving"></i>
 		<span data-i18n="POPUPS_DOMAIN_ALIAS/BUTTON_ADD"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,5 +1,4 @@
-<div class="modal fade b-plugin-content">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h4>
 		<span data-i18n="POPUPS_PLUGIN/TITLE_PLUGIN"></span>
@@ -7,8 +6,8 @@
 		"<span data-bind="text: name"></span>"
 	</h4>
 	<span data-bind="visible: hasReadme, text: readme"></span>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<form class="form-horizontal plugin-form" action="#/" onsubmit="return false;">
 		<div class="well" data-bind="visible: !hasConfiguration()" data-i18n="POPUPS_PLUGIN/DESC_NOTHING_TO_CONFIGURE"></div>
 		<div class="alert" data-bind="visible: '' !== saveError()">
@@ -19,8 +18,8 @@
 			<div data-bind="template: { name: 'AdminSettingsPluginProperty' }"></div>
 		</div>
 	</form>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonClose" data-bind="command: cancelCommand">
 		<i class="fontastic">✖</i>
 		<span data-i18n="POPUPS_PLUGIN/BUTTON_CLOSE"></span>
@@ -29,5 +28,4 @@
 		<i class="fontastic">✔</i>
 		<span data-i18n="POPUPS_PLUGIN/BUTTON_SAVE"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,6 +1,5 @@
-<div class="modal fade b-ask-content g-ui-user-select-none">
+<div class="modal-body" data-bind="html: askDesc"></div>
-	<div class="modal-body" data-bind="html: askDesc"></div>
+<footer>
-	<div class="modal-footer">
 	<button class="btn buttonYes" data-bind="click: yesClick">
 		<i class="fontastic">✔</i>
 		<span data-bind="text: yesButton"></span>
@@ -9,5 +8,4 @@
 		<i class="fontastic">✖</i>
 		<span data-bind="text: noButton"></span>
 	</button>
-	</div>
+</footer>
-</div>

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

@@ -1,12 +1,10 @@
-<div class="modal fade b-languages-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_LANGUAGES/TITLE_LANGUAGES"></h3>
-	</div>
+</header>
-	<div class="modal-body" style="min-height: 150px;" data-bind="foreach: languages">
+<div class="modal-body" style="min-height: 150px;" data-bind="foreach: languages">
 	<label data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
 		attr: { title: $root.languageTooltipName(key) },
 		text: fullName">
 	</label>
-	</div>
 </div>

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

@@ -1,11 +1,10 @@
-<div class="b-login-content">
+<div class="descWrapper" data-bind="visible: '' !== loadingDesc, text: loadingDesc"></div>
-	<div class="descWrapper" data-bind="visible: '' !== loadingDesc, text: loadingDesc"></div>
+<div class="alert" data-bind="hidden: !submitError()" hidden="">
-	<div class="alert" data-bind="hidden: !submitError()" hidden="">
 	<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
 	<span data-bind="text: submitError"></span>
 	<p data-bind="visible: '' !== submitErrorAddidional(), text: submitErrorAddidional"></p>
-	</div>
+</div>
-	<form action="#/"
+<form action="#/"
 	data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
 	<div class="controls" data-bind="css: {'error': emailError}">
 		<div class="input-append">
@@ -53,5 +52,4 @@
 		}"></div>
 
 	</div>
-	</form>
+</form>
-</div>

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

@@ -1,12 +1,11 @@
-<div class="modal fade b-account-add-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3>
 		<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_ADD_ACCOUNT"></span>
 		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/TITLE_UPDATE_ACCOUNT"></span>
 	</h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="form-horizontal">
 		<div class="alert" data-bind="visible: '' !== submitError()">
 			<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
@@ -34,13 +33,12 @@
 			</div>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonAddAccount" data-bind="command: addAccountCommand">
 		<i data-bind="visible: isNew, css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: isNew" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_ADD_ACCOUNT"></span>
 		<i data-bind="visible: !isNew(), css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: !isNew()" data-i18n="POPUPS_ADD_ACCOUNT/BUTTON_UPDATE_ACCOUNT"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,21 +1,19 @@
-<div class="modal fade b-open-pgp-key-add-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/TITLE_IMPORT_OPEN_PGP_KEY"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="alert"  data-bind="visible: keyError() && keyErrorMessage(), text: keyErrorMessage"></div>
 	<div class="form-horizontal">
 		<div class="control-group" data-bind="css: {'error': keyError}">
 			<textarea class="inputKey input-xxlarge" rows="14" autofocus="" autocomplete="off" data-bind="value: key"></textarea>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonAddAccount" data-bind="command: addOpenPgpKeyCommand">
 		<i class="icon-list-add"></i>
 		&nbsp;&nbsp;
 		<span data-i18n="POPUPS_IMPORT_OPEN_PGP_KEY/BUTTON_IMPORT_OPEN_PGP_KEY"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,9 +1,8 @@
-<div class="modal fade b-advanced-search-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="SEARCH/TITLE_ADV"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<form class="form-horizontal" action="#/" autocomplete="off" onsubmit="return false;" data-bind="command: searchCommand">
 		<div class="row">
 			<div class="span4">
@@ -94,11 +93,10 @@
 			</div>
 		</div>
 	</form>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<button type="submit" class="btn buttonAdvSearch" data-bind="command: searchCommand">
 		<i class="fontastic">🔎</i>
 		<span data-i18n="GLOBAL/SEARCH"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,5 +1,4 @@
-<div class="modal fade b-compose" data-bind="css: {'loading': saving() || sending()}">
+<header class="g-ui-user-select-none" data-bind="css: {'loading': saving() || sending()}">
-	<div class="modal-header b-header-toolbar g-ui-user-select-none">
 	<a class="btn button-send" data-bind="command: sendCommand, tooltipErrorTip: sendErrorDesc, css: {'btn-success': sendButtonSuccess, 'btn-danger': sendError, 'btn-warning': sendSuccessButSaveError }">
 		<i data-bind="css: {'icon-paper-plane': !sending(), 'icon-spinner': sending()}"></i>
 		<span class="hide-mobile" data-i18n="COMPOSE/BUTTON_SEND"></span>
@@ -16,8 +15,8 @@
 		<i class="fontastic">🗑</i>
 	</a>
 	<span class="saved-text hide-mobile" data-bind="text: savedTimeText"></span>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="b-header g-ui-user-select-none">
 		<table>
 			<tr>
@@ -165,12 +164,8 @@
 				</div>
 				<div class="attachmentNameParent">
 					<button type="button" class="close pull-right" style="margin-top:-4px;" data-bind="click: cancel">×</button>
-						<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
+					<div class="attachmentName" data-bind="text: fileName"></div>
-							<span class="attachmentName" data-bind="text: fileName"></span>&nbsp;
+					<span class="attachmentSize" data-bind="text: friendlySize"></span>
-						</div>
-						<div>
-							<span class="attachmentSize" data-bind="text: friendlySize"></span>&nbsp;
-						</div>
 				</div>
 			</li>
 		</ul>
@@ -179,5 +174,4 @@
 	</div>
 
 	<div class="textAreaParent" data-bind="visible: !attachmentsPlace(), initDom: composeEditorArea"></div>
-	</div>
 </div>

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

@@ -1,14 +1,10 @@
-<div class="modal fade b-compose-open-pgp-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_COMPOSE_OPEN_PGP/TITLE_COMPOSE_OPEN_PGP"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+
-		<div class="alert" data-bind="visible: '' !== notification()">
+<div class="modal-body">
-			<span data-bind="text: notification"></span>
+	<div class="alert" data-bind="visible: '' !== notification(), text: notification"></div>
-		</div>
-		<div>
-			<div>
 	<div data-bind="component: {
 			name: 'Checkbox',
 			params: {
@@ -36,8 +32,7 @@
 			</div>
 		</div>
 	</div>
-			</div>
+
-			<div>
 	<div data-bind="component: {
 			name: 'Checkbox',
 			params: {
@@ -65,8 +60,6 @@
 			</div>
 		</div>
 	</div>
-			</div>
-		</div>
 	<div class="key-actions">
 		<div data-bind="visible: sign()">
 			<input type="password" class="inputPassword input-block-level"
@@ -79,8 +72,9 @@
 		<select class="input-block-level" data-bind="visible: encrypt() && 0 < publicKeysOptions().length, options: publicKeysOptions, value: selectedPublicKey,
 			optionsCaption: publicKeysOptionsCaption, optionsText: 'name', optionsValue: 'id'"></select>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+
+<footer>
 	<button class="btn buttonDo" data-bind="command: doCommand,
 		enable: (sign() || encrypt()) && (!encrypt() || encrypt() && encryptKeys().length > 0)">
 		<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
@@ -88,5 +82,4 @@
 		<span data-bind="visible: !sign() && encrypt()" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_ENCRYPT"></span>
 		<span data-bind="visible: (sign() && encrypt()) || (!sign() && !encrypt())" data-i18n="POPUPS_COMPOSE_OPEN_PGP/BUTTON_SIGN_AND_ENCRYPT"></span>
 	</button>
-	</div>
+</footer>
-</div>

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

@@ -1,5 +1,4 @@
-<div class="modal fade">
+<header class="b-header-toolbar g-ui-user-select-none">
-	<div class="modal-header b-header-toolbar g-ui-user-select-none">
 
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 
@@ -45,8 +44,8 @@
 		</div>
 		<span data-bind="visible: contacts.importing() || contacts.syncing()" class="btn"><i class="icon-spinner"></i></span>
 	</div>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="b-list-toolbar">
 		<input type="search" class="e-search" placeholder="Search" autocorrect="off" autocapitalize="off" data-i18n="[placeholder]GLOBAL/SEARCH" data-bind="value: search" />
 	</div>
@@ -114,7 +113,7 @@
 						<span data-i18n="CONTACTS/ADD_MENU_NICKNAME"></span>
 					</a>
 				</li>
-<!--
+<!-
 				<li role="presentation">
 					<a href="#" tabindex="-1" data-bind="click: addNewAddress">
 						<span data-i18n="CONTACTS/ADD_MENU_ADDRESS"></span>
@@ -203,5 +202,4 @@
 -->
 		</div>
 	</div>
-	</div>
 </div>

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

@@ -1,12 +1,11 @@
-<div class="modal fade b-filter-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3>
 		<span data-i18n="POPUPS_FILTER/TITLE_CREATE_FILTER" data-bind="visible: isNew"></span>
 		<span data-i18n="POPUPS_FILTER/TITLE_EDIT_FILTER" data-bind="visible: !isNew()"></span>
 	</h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="filter" data-bind="with: filter, i18nInit: filter">
 		<div data-bind="i18nInit: true">
 
@@ -21,7 +20,6 @@
 			</div>
 
 			<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_CONDITIONS"></div>
-				<div>
 			<div data-bind="visible: 1 < conditions().length">
 				<select class="span4" data-bind="value: conditionsType">
 					<option value="Any"
@@ -40,18 +38,16 @@
 				<i class="fontastic">✚</i>
 				<span data-i18n="POPUPS_FILTER/BUTTON_ADD_CONDITION"></span>
 			</a>
-				</div>
 			<br />
 			<div class="legend" data-i18n="POPUPS_FILTER/LEGEND_ACTIONS"></div>
 			<select class="span3" data-bind="options: $root.actionTypeOptions, value: actionType, optionsText: 'name', optionsValue: 'id'"></select>
 			<div data-bind="template: {'name': actionTemplate()}, i18nUpdate: actionTemplate"></div>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonSave" data-bind="command: saveFilterCommand">
 		<i class="fontastic">✔</i>
 		<span data-i18n="GLOBAL/DONE"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,13 +1,11 @@
-<div class="modal fade b-folder-clear-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3>
 		<span data-i18n="POPUPS_CLEAR_FOLDER/TITLE_CLEAR_FOLDER" data-bind="visible: !clearingProcess()"></span>
 		<span data-i18n="POPUPS_CLEAR_FOLDER/TITLE_CLEARING_PROCESS" data-bind="visible: clearingProcess"></span>
 	</h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
-		<div>
 	<i class="fontastic" style="color:red">⚠</i>
 	&nbsp;&nbsp;
 	<strong data-i18n="[html]POPUPS_CLEAR_FOLDER/DANGER_DESC_WARNING"></strong>
@@ -16,12 +14,10 @@
 	<span data-bind="html: dangerDescHtml"></span>
 	<br />
 	<span data-i18n="[html]POPUPS_CLEAR_FOLDER/DANGER_DESC_HTML_2"></span>
-		</div>
+</div>
-	</div>
+<footer>
-	<div class="modal-footer">
 	<a class="btn btn-danger" data-bind="command: clearCommand">
 		<i class="fontastic" data-bind="css: {'icon-spinner white': clearingProcess()}">🔥</i>
 		<span data-i18n="GLOBAL/CLEAR"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,9 +1,8 @@
-<div class="modal fade b-folder-create-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="form-horizontal">
 		<div class="control-group">
 			<label class="control-label" data-i18n="POPUPS_CREATE_FOLDER/LABEL_PARENT"></label>
@@ -21,11 +20,10 @@
 			</div>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonCreate" data-bind="command: createFolderCommand">
 		<i class="icon-folder-add"></i>
 		<span data-i18n="POPUPS_CREATE_FOLDER/BUTTON_CREATE"></span>
 	</a>
-	</div>
+</footer>
-</div>

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

@@ -1,9 +1,8 @@
-<div class="modal fade b-folder-system-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_SYSTEM_FOLDERS/TITLE_SYSTEM_FOLDERS"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="form-horizontal">
 		<div class="alert" data-bind="visible: '' !== notification()" data-bind="text: notification"></div>
 		<br />
@@ -43,5 +42,4 @@
 			</div>
 		</div>
 	</div>
-	</div>
 </div>

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

@@ -1,12 +1,11 @@
-<div class="modal fade b-identity-content">
+<header class="g-ui-user-select-none">
-	<div class="modal-header g-ui-user-select-none">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3>
 		<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/TITLE_ADD_IDENTITY"></span>
 		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/TITLE_UPDATE_IDENTITY"></span>
 	</h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="form-horizontal g-ui-user-select-none">
 		<div class="alert" data-bind="visible: '' !== submitError()">
 			<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
@@ -80,13 +79,12 @@
 			<div class="e-signature-place" data-bind="editor: signature"></div>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonAddIdentity" data-bind="command: addOrEditIdentityCommand">
 		<i data-bind="visible: !edit(), css: {'icon-user-add': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: !edit()" data-i18n="POPUPS_IDENTITY/BUTTON_ADD_IDENTITY"></span>
 		<i data-bind="visible: edit, css: {'icon-ok': !submitRequest(), 'icon-spinner': submitRequest()}"></i>
 		<span data-bind="visible: edit" data-i18n="POPUPS_IDENTITY/BUTTON_UPDATE_IDENTITY"></span>
 	</a>
-	</div>
+</footer>
-</div>

snappymail/v/0.0.0/app/templates/Views/User/PopupsKeyboardShortcutsHelp.html

@@ -1,9 +1,8 @@
-<div class="modal fade b-shortcuts-content">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="SHORTCUTS_HELP/LEGEND_SHORTCUTS_HELP"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 
 	<div class="tabs">
 
@@ -95,5 +94,4 @@
 		</div>
 
 	</div>
-	</div>
 </div>

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

@@ -1,9 +1,8 @@
-<div class="modal fade b-message-open-pgp-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_MESSAGE_OPEN_PGP/TITLE_MESSAGE_OPEN_PGP"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="form-horizontal">
 		<div class="alert" data-bind="visible: '' !== notification()">
 			<span data-bind="text: notification"></span>
@@ -14,16 +13,12 @@
 			<div class="controls key-list" data-bind="foreach: privateKeys" style="margin-top: 5px">
 				<div class="key-list__item">
 					<i class="key-list__item__radio fontastic">○</i>
-						<div class="key-list__item__names">
+					<div class="key-list__item__names" data-bind="foreach: users">
-							<span data-bind="foreach: users">
+						<div class="key-list__item__name">
-								<div>
-								<span class="key-list__item__name">
 							<span data-bind="text: $data"></span>
 							&nbsp;
-									<span>[<span data-bind="text: $parent.id"></span>]</span>
+							[<span data-bind="text: $parent.id"></span>]
-								</span>
 						</div>
-							</span>
 					</div>
 				</div>
 			</div>
@@ -36,11 +31,10 @@
 			</div>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<button class="btn buttonDo" data-bind="command: doCommand">
 		<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
 		<span data-i18n="POPUPS_MESSAGE_OPEN_PGP/BUTTON_DECRYPT"></span>
 	</button>
-	</div>
+</footer>
-</div>

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

@@ -1,9 +1,8 @@
-<div class="modal fade b-open-pgp-key-generate-content g-ui-user-select-none">
+<header>
-	<div class="modal-header">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/TITLE_GENERATE_OPEN_PGP_KEYS"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="form-horizontal">
 		<div class="alert" data-bind="visible: '' !== submitError()">
 			<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
@@ -41,11 +40,10 @@
 			</div>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonHenerateOpenPgpKey" data-bind="command: generateOpenPgpKeyCommand">
 		<i class="fontastic" data-bind="css: {'icon-spinner': submitRequest()}">🔑</i>
 		<span data-i18n="POPUPS_GENERATE_OPEN_PGP_KEYS/BUTTON_GENERATE_OPEN_PGP_KEYS"></span>
 	</a>
-	</div>
+</footer>
-</div>

snappymail/v/0.0.0/app/templates/Views/User/PopupsSieveScript.html

@@ -1,13 +1,13 @@
-<div class="modal fade b-filter-script g-ui-user-select-none" data-bind="with: script">
+<!-- ko with: script -->
-	<div class="modal-header">
+<header>
 	<button type="button" class="close" data-bind="command: $root.cancelCommand">×</button>
 	<h3>
 		<span data-i18n="POPUPS_SIEVE_SCRIPT/TITLE_CREATE" data-bind="visible: !exists()"></span>
 		<span data-i18n="POPUPS_SIEVE_SCRIPT/TITLE_EDIT" data-bind="visible: exists"></span>
 		<span data-bind="visible: exists">: <!-- ko text: name--><!-- /ko --></span>
 	</h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 
 	<div class="control-group" data-bind="css: {'error': nameError}, hidden: exists">
 		<div class="controls">
@@ -71,8 +71,8 @@
 			<span data-i18n="POPUPS_SIEVE_SCRIPT/BUTTON_ADD_FILTER"></span>
 		</a>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn" data-bind="visible: $root.allowToggle, click: function() { $root.toggleFiltersRaw(); }, css: {'active': $root.rawActive }" data-i18n="[title]POPUPS_SIEVE_SCRIPT/BUTTON_RAW_SCRIPT">
 		<i class="icon-file-code"></i>
 	</a>
@@ -80,5 +80,5 @@
 		<i class="fontastic" data-bind="css: {'icon-spinner': $root.saving}">💾</i>
 		<span data-i18n="GLOBAL/SAVE"></span>
 	</a>
-	</div>
+</footer>
-</div>
+<!-- /ko -->

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

@@ -1,16 +1,15 @@
-<div class="modal fade b-open-pgp-key-view-content">
+<header class="g-ui-user-select-none">
-	<div class="modal-header g-ui-user-select-none">
 	<button type="button" class="close" data-bind="command: cancelCommand">×</button>
 	<h3 data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/TITLE_VIEW_OPEN_PGP_KEY"></h3>
-	</div>
+</header>
-	<div class="modal-body">
+<div class="modal-body">
 	<div class="form-horizontal">
 		<div class="control-group">
 			<pre class="key-viewer" data-bind="initDom: keyDom, text: key"></pre>
 		</div>
 	</div>
-	</div>
+</div>
-	<div class="modal-footer">
+<footer>
 	<a class="btn buttonClose" data-bind="command: cancelCommand">
 		<i class="fontastic">✖</i>
 		<span data-i18n="GLOBAL/CLOSE"></span>
@@ -19,5 +18,4 @@
 		<i class="fontastic">🔑</i>
 		<span data-i18n="POPUPS_VIEW_OPEN_PGP_KEY/BUTTON_SELECT"></span>
 	</a>
-	</div>
+</footer>
-</div>

snappymail/v/0.0.0/app/templates/Views/User/PopupsWindowSimpleMessage.html

@@ -1,121 +0,0 @@
-<style>
-
-html, body {
-	margin: 0;
-	padding: 0;
-	background-color: #fff;
-	font-size: 13px;
-	font-family: arial, sans-serif;
-}
-
-.tbl {width: 100%; font-size: 12px; font-family: arial, sans-serif;}
-.tt {padding: 5px; border:solid #ddd; border-width:0px 0px 1px 0px}
-.tv {padding: 5px; border:solid #ddd; border-width:0px 0px 1px 1px}
-.tb {padding: 15px}
-
-a {color: blue; text-decoration: underline}
-a:visited {color: #609}
-a:active {color: red}
-blockquote {border-left: 2px solid black; margin: 0; padding: 0px 10px}
-
-pre {
-	margin: 0px;
-	padding: 0px;
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-	background: #fff;
-	border: none;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	word-break: break-all;
-}
-
-.text-body {
-	font-size: 13px;
-}
-
-.text-body.html div[data-x-div-type=body] {
-	margin: 15px;
-}
-
-.text-body.html pre {
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	word-break: break-all;
-}
-
-.text-body.plain {
-
-	padding: 15px;
-	white-space: pre-wrap;
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-}
-
-.text-body.plain pre {
-	margin: 0px;
-	padding: 0px;
-	background: #fff;
-	border: none;
-	font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
-	white-space: pre-wrap;
-	word-wrap: break-word;
-	word-break: break-all;
-}
-
-.text-body.plain blockquote {
-	border-left: 2px solid blue;
-	color: blue;
-}
-
-.text-body.plain blockquote blockquote {
-	border-left: 2px solid green;
-	color: green;
-}
-
-.text-body.plain blockquote blockquote blockquote {
-	border-left: 2px solid red;
-	color: red;
-}
-</style>
-
-<table cellpadding="0" cellspacing="0" class="tbl">
-	<tbody>
-		<tr>
-			<td class="tt" data-i18n="GLOBAL/FROM"></td>
-			<td class="tv" data-bind="text: popupFrom"></td>
-		</tr>
-		<tr>
-			<td class="tt" data-i18n="GLOBAL/TO"></td>
-			<td class="tv" data-bind="text: popupTo"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupCc">
-			<td class="tt" data-i18n="GLOBAL/CC"></td>
-			<td class="tv" data-bind="text: popupCc"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupBcc">
-			<td class="tt" data-i18n="GLOBAL/BCC"></td>
-			<td class="tv" data-bind="text: popupBcc"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupReplyTo">
-			<td class="tt" data-i18n="GLOBAL/REPLY_TO"></td>
-			<td class="tv" data-bind="text: popupReplyTo"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupDate">
-			<td class="tt" data-i18n="MESSAGE/LABEL_DATE"></td>
-			<td class="tv" data-bind="text: popupDate"></td>
-		</tr>
-		<tr>
-			<td class="tt" data-i18n="GLOBAL/SUBJECT"></td>
-			<td class="tv" data-bind="text: popupSubject"></td>
-		</tr>
-		<tr data-bind="visible: '' !== popupAttachments">
-			<td class="tt" data-i18n="MESSAGE/PRINT_LABEL_ATTACHMENTS"></td>
-			<td class="tv" data-bind="text: popupAttachments"></td>
-		</tr>
-		<tr>
-			<td colspan="2" class="tb">
-				<div class="text-body" data-bind="html: popupBody, css: {'plain': !popupIsHtml, 'html': popupIsHtml}"></div>
-			</td>
-		</tr>
-	</tbody>
-</table>

snappymail/v/0.0.0/themes/SquaresDark/styles.css

@@ -1,29 +1,29 @@
 
 :root {
-	// MAIN
+	/* MAIN */
 	--main-color: #fff;
 	--main-bg-color: #48525C;
 	--main-bg-image: url("images/background.jpg");
 
-	// LOADING
+	/* LOADING */
 	--loading-color: #ddd;
 	--loading-text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
 
-	// LOGIN
+	/* LOGIN */
 	--login-color: #eee;
 	--login-bg-color: rgba(0,0,0,0.5);
 	--login-box-shadow: 0px 2px 10px rgba(0,0,0,0.5);
 	--login-border: none;
 	--login-border-radius: 7px;
 
-	// MENU
+	/* MENU */
 	--dropdown-menu-color: #333;
 	--dropdown-menu-bg-color: #fff;
 	--dropdown-menu-hover-bg-color: #48525C;
 	--dropdown-menu-hover-color: #eee;
 	--dropdown-menu-disable-color: #999;
 
-	// FOLDERS
+	/* FOLDERS */
 	--folders-color: #fff;
 	--folders-disabled-color: #aaa;
 	--folders-selected-color: #fff;
@@ -35,14 +35,14 @@
 	--folders-drop-color: #fff;
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
-	// SETTINGS
+	/* SETTINGS */
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
 	--settings-menu-hover-color: #fff;
 	--settings-menu-hover-bg-color: rgba(0,0,0,0.5);
 
-	// MESSAGE LIST
+	/* MESSAGE LIST */
 	--message-list-toolbar-bg-color: #eee;
 }
 
@@ -72,31 +72,31 @@
 }
 
 .well,
-.modal,
+#rl-popups > dialog,
 .b-settins-right .b-content,
 .messageList,
 .messageView,
 .b-admin-right .b-content,
-.b-compose .b-attachment-place {
+#V-PopupsCompose .b-attachment-place {
 	background-color: #000;
 	border-color: #555;
 	color: var(--main-color);
 }
 
 .legend,
-.modal-header, .modal-footer,
+dialog header, dialog footer,
 .table td, .table th {
 	border-color: #555 !important;
 }
 
 .legend,
-.b-compose .b-header .e-identity,
+#V-PopupsCompose .b-header .e-identity,
 .messageView .messageItem {
 	color: var(--main-color);
 }
 
 .rl-mobile .squire-toolbar,
-.b-compose .b-attachment-place.dragAndDropOver {
+#V-PopupsCompose .b-attachment-place.dragAndDropOver {
 	background-color: #222;
 }
 

vendors/bootstrap/less/modals.less

@@ -1,60 +0,0 @@
-//
-// Modals
-// --------------------------------------------------
-
-
-// Base modal
-.modal {
-  position: absolute;
-  z-index: @zindexModal;
-  overflow: hidden;
-  width: calc(100% - 20px);
-  max-width: 560px;
-  margin: 10px auto;
-  background-color: @white;
-  border: 1px solid rgba(0,0,0,.3);
-  border-radius: 6px;
-  box-shadow: 0 5px 80px rgba(0,0,0,0.3);
-  background-clip: padding-box;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-.modal-header {
-  padding: 9px 15px;
-  border-bottom: 1px solid #eee;
-  // Close icon
-  .close { margin-top: 2px; }
-  // Heading
-  h3 {
-    margin: 0;
-    line-height: 30px;
-  }
-}
-
-// Body (where all modal content resides)
-.modal-body {
-  overflow-y: auto;
-  padding: 15px;
-}
-
-// Footer (for actions)
-.modal-footer {
-  padding: 14px 15px 15px;
-  margin-bottom: 0;
-  text-align: right; // right align buttons
-  border-top: 1px solid #ddd;
-  border-radius: 0 0 6px 6px;
-  .clearfix(); // clear it in case folks use .pull-* classes on buttons
-
-  // Properly space out buttons
-  .btn + .btn {
-    margin-left: 5px;
-    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
-  }
-  // but override that for button groups
-  .btn-group .btn + .btn {
-    margin-left: -1px;
-  }
-}