Cleanup styling and gulp merge @media queries

dev/Stores/User/Message.js

@@ -2,7 +2,7 @@ import ko from 'ko';
 
 import { Scope, Notification } from 'Common/Enums';
 import { MessageSetAction } from 'Common/EnumsUser';
-import { doc, createElement, elementById } from 'Common/Globals';
+import { doc, $htmlCL, createElement, elementById } from 'Common/Globals';
 import { isNonEmptyArray, pInt, pString, addObservablesTo, addSubscribablesTo } from 'Common/Utils';
 import { plainToHtml } from 'Common/UtilsUser';
 
@@ -186,6 +186,8 @@ export const MessageUserStore = new class {
 				}
 			},
 
+			listLoadingAnimation: value => $htmlCL.toggle('list-loading', value),
+
 			listLoading: value =>
 				this.listCompleteLoading(value || this.listIsNotCompleted()),
 

dev/Styles/@Admin.less

@@ -23,20 +23,19 @@
 
 @import "Ui.less";
 @import "Main.less";
-@import "LayoutAdmin.less";
 @import "Components.less";
 @import "Login.less";
 @import "Ask.less";
 @import "Languages.less";
 
-@import "Admin.less";
+@import "Admin/Layout.less";
-@import "AdminGeneral.less";
+@import "Admin/General.less";
-@import "AdminBranding.less";
+@import "Admin/Branding.less";
-@import "AdminDomains.less";
+@import "Admin/Domains.less";
-@import "AdminDomain.less";
+@import "Admin/Domain.less";
-@import "AdminPackages.less";
+@import "Admin/Packages.less";
-@import "AdminPlugin.less";
+@import "Admin/Plugin.less";
-@import "AdminAbout.less";
+@import "Admin/About.less";
 
 @import "Animations.less";
 

dev/Styles/@Main.less

@@ -24,45 +24,39 @@
 
 @import "Ui.less";
 @import "Main.less";
-@import "Layout.less";
 @import "Components.less";
 @import "Login.less";
 @import "Ask.less";
 @import "Languages.less";
 
-@import "SystemDropDown.less";
+@import "User/Layout.less";
-@import "Shortcuts.less";
+@import "User/SystemDropDown.less";
-@import "FolderList.less";
+@import "User/Shortcuts.less";
-/*
+@import "User/FolderList.less";
-@import "FolderClear.less";
+@import "User/Filter.less";
-@import "FolderCreate.less";
+@import "User/Template.less";
-@import "FolderSystem.less";
+@import "User/OpenPgpKey.less";
-@import "Account.less";
+@import "User/Identity.less";
-*/
+@import "User/AdvancedSearch.less";
-@import "Filter.less";
+@import "User/Attachmnets.less";
-@import "Template.less";
+@import "User/MessageList.less";
-@import "OpenPgpKey.less";
+@import "User/MessageView.less";
-@import "Identity.less";
+@import "User/Contacts.less";
-@import "AdvancedSearch.less";
+@import "User/Compose.less";
-@import "Attachmnets.less";
+@import "User/EmailAddresses.less";
-@import "MessageList.less";
-@import "MessageView.less";
-@import "Contacts.less";
-@import "Compose.less";
-@import "EmailAddresses.less";
 
-@import "Settings.less";
+@import "User/Settings.less";
-@import "SettingsGeneral.less";
+@import "User/SettingsGeneral.less";
-@import "SettingsAccounts.less";
+@import "User/SettingsAccounts.less";
-@import "SettingsTemplates.less";
+@import "User/SettingsTemplates.less";
-@import "SettingsOpenPGP.less";
+@import "User/SettingsOpenPGP.less";
-@import "SettingsFolders.less";
+@import "User/SettingsFolders.less";
-@import "SettingsThemes.less";
+@import "User/SettingsThemes.less";
-@import "SettingsFilters.less";
+@import "User/SettingsFilters.less";
 
-@import "SquireUI.less";
+@import "User/SquireUI.less";
 
-@import "AnimationsUser.less";
+@import "User/Animations.less";
 @import "Animations.less";
 
 @import "_End.less";

dev/Styles/Account.less

@@ -1,4 +0,0 @@
-.b-account-add-content {
-	.modal-header {
-	}
-}

dev/Styles/Admin/Domain.less

@@ -1,6 +1,6 @@
 .b-domain-alias-content {
 	&.modal {
-		width: 330px;
+		max-width: 330px;
 	}
 
 	.error-desc {
@@ -11,7 +11,7 @@
 .b-domain-content {
 
 	&.modal {
-		width: 810px;
+		max-width: 810px;
 	}
 
 	.modal-body {

dev/Styles/Admin/Layout.less

@@ -1,7 +1,25 @@
+.UserBackground body {
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+#rl-left, #rl-right {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
+	border: 0;
+	z-index: 0;
+}
 
 #rl-left {
 	overflow: auto;
 	padding-top: 50px + @rlLowMargin + 10px;
+	width: @rlLeftWidth;
 
 	nav {
 		a {
@@ -26,6 +44,11 @@
 	}
 }
 
+#rl-right {
+	z-index: 1;
+	left: @rlLeftWidth;
+}
+
 .b-admin-right {
 
 	.b-toolbar {
@@ -67,3 +90,56 @@
 	padding-left: 12px;
 	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;
+}
+
+/* desktop */
+@media screen and (min-width: 1000px) {
+	.toggleLeft {
+		display: none;
+	}
+}
+
+/* desktop-large */
+@media screen and (min-width: 1401px) {
+	#rl-left {
+		width: @rlLeftWidth + 20;
+	}
+
+	#rl-right {
+		left: @rlLeftWidth + 20;
+	}
+}
+
+/* mobile and tablet */
+@media screen and (max-width: 999px) {
+	#rl-settings-subscreen {
+		padding: 10px;
+	}
+
+	html:not(.rl-left-panel-disabled) #rl-right {
+		right: 5-@rlLeftWidth;
+	}
+
+	html.rl-left-panel-disabled {
+		#rl-left {
+			width: 0 !important;
+		}
+		#rl-right {
+			left: 5px !important;
+		}
+	}
+}

dev/Styles/Admin/Plugin.less

@@ -1,7 +1,7 @@
 .b-plugin-content {
 
 	&.modal {
-		width: 660px;
+		max-width: 660px;
 	}
 
 	.modal-body {

dev/Styles/AdminPlugins.less

@@ -1,24 +0,0 @@
-
-.b-admin-plugins-list-table {
-	max-width: 620px; /* span8 */
-
-	&.disabled {
-		opacity: 0.5;
-	}
-
-	.disabled {
-		opacity: 0.5;
-	}
-}
-
-.b-admin-plugin-property {
-	.help-block {
-		display: block; // account for any element using help-block
-		font-style: italic;
-		opacity: 0.5;
-		margin-bottom: 5px;
-	}
-	.controls {
-		width: 470px;
-	}
-}

dev/Styles/FolderClear.less

@@ -1,4 +0,0 @@
-.b-folder-clear-content {
-	.modal-header {
-	}
-}

dev/Styles/FolderCreate.less

@@ -1,4 +0,0 @@
-.b-folder-create-content {
-	.modal-header {
-	}
-}

dev/Styles/FolderSystem.less

@@ -1,4 +0,0 @@
-.b-folder-system-content {
-	.modal-header {
-	}
-}

dev/Styles/Languages.less

@@ -1,16 +1,15 @@
 .b-languages-content {
 
 	&.modal {
-		width: 700px;
+		max-width: 700px;
 	}
 
-	.lang-item {
+	label {
 		display: inline-block;
 		padding: 5px 15px;
 		margin: 2px 5px;
 		width: 180px;
 		background-color: rgba(128, 128, 128, 0.1);
-		text-align: left;
 		border: 1px solid transparent;
 		border-radius: 3px;
 		position: relative;
@@ -26,7 +25,6 @@
 		}
 		&.selected::after {
 			content: "✔";
-			color: #080;
 			position: absolute;
 			right: 4px;
 			font-family: snappymail;
@@ -39,7 +37,7 @@
 }
 
 @media screen and (max-width: 999px) {
-	.b-languages-content .lang-item {
+	.b-languages-content label {
 		width: calc(100% - 40px);
 	}
 }

dev/Styles/LayoutAdmin.less

@@ -1,80 +0,0 @@
-
-.UserBackground body {
-	background-size: contain;
-	background-repeat: no-repeat;
-	background-position: center;
-}
-
-#rl-left, #rl-right {
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	padding: 0;
-	margin: 0;
-	border: 0;
-	z-index: 0;
-}
-
-#rl-left {
-	width: @rlLeftWidth;
-}
-
-#rl-right {
-	z-index: 1;
-	left: @rlLeftWidth;
-}
-
-#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;
-}
-
-/* desktop */
-@media screen and (min-width: 1000px) {
-	.toggleLeft {
-		display: none;
-	}
-}
-
-/* desktop-large */
-@media screen and (min-width: 1401px) {
-	#rl-left {
-		width: @rlLeftWidth + 20;
-	}
-
-	#rl-right {
-		left: @rlLeftWidth + 20;
-	}
-}
-
-/* mobile and tablet */
-@media screen and (max-width: 999px) {
-	#rl-settings-subscreen {
-		padding: 10px;
-	}
-
-	html:not(.rl-left-panel-disabled) #rl-right {
-		right: 5-@rlLeftWidth;
-	}
-
-	html.rl-left-panel-disabled {
-		#rl-left {
-			width: 0 !important;
-		}
-		#rl-right {
-			left: 5px !important;
-		}
-	}
-}

dev/Styles/Main.less

@@ -20,6 +20,11 @@ body {
 	right: 0;
 }
 
+html.list-loading body {
+/*	cursor: wait;*/
+	cursor: progress;
+}
+
 html:not(.rl-mobile) {
 	min-width: 700px;
 }
@@ -32,10 +37,6 @@ html:not(.rl-mobile) {
 	}
 }
 
-textarea {
-	resize: none;
-}
-
 option:disabled {
 	color: #aaa;
 	cursor: not-allowed;

dev/Styles/Ui.less

@@ -16,32 +16,6 @@
 	}
 }
 
-.e-paginator {
-
-	.e-page {
-
-		display: inline-block;
-		opacity: 0.5;
-		text-decoration: none;
-		font-size: 22px;
-		padding: 3px;
-		cursor: pointer;
-
-		&:hover {
-			opacity: 0.8;
-		}
-
-		&.current {
-			opacity: 1;
-		}
-
-		&.current .e-page-number {
-			font-size: 115%;
-			text-decoration: underline;
-		}
-	}
-}
-
 .settings-save-trigger {
 
 	display: inline-block;
@@ -93,25 +67,6 @@ textarea + .settings-save-trigger {
 	}
 }
 
-.e-languages {
-
-	margin-top: 8px;
-	color: #333;
-
-	.flag-name {
-
-		color: #333;
-		border-bottom: 1px dashed #333;
-		cursor: pointer;
-		padding: 2px 0;
-
-		&:focus {
-			outline: 1px;
-			outline-style: dotted;
-		}
-	}
-}
-
 .e-action {
 	cursor: pointer;
 }

dev/Styles/User/AdvancedSearch.less

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

dev/Styles/User/Animations.less

@@ -43,15 +43,6 @@
 		transition: opacity 0.3s linear;
 	}
 
-	.messageList {
-		.messageListItem {
-			transition: max-height 400ms ease;
-		}
-		.listDragOver {
-			transition: all 400ms ease;
-		}
-	}
-
 	.b-list-content {
 		.e-contact-item {
 			transition: max-height 400ms ease;

dev/Styles/User/Identity.less

@@ -1,7 +1,7 @@
 .b-identity-content {
 
 	&.modal {
-		width: 770px;
+		max-width: 770px;
 	}
 
 	.modal-body {

dev/Styles/User/Layout.less

@@ -371,3 +371,24 @@ html:not(.rl-mobile) .show-mobile {
 html.rl-mobile .width100-on-mobile {
 	width: 100% !important;
 }
+
+.e-paginator {
+
+	.e-page {
+		opacity: 0.5;
+		text-decoration: none;
+		font-size: 22px;
+		padding: 3px;
+		cursor: pointer;
+
+		&:hover {
+			opacity: 0.8;
+		}
+
+		&.current {
+			opacity: 1;
+			font-size: 25px;
+			cursor: default;
+		}
+	}
+}

dev/Styles/User/MessageList.less

@@ -198,7 +198,29 @@ html.rl-no-preview-pane {
 		}
 	}
 
+	&.message-focused {
+		.b-message-list-wrapper {
+			background-color: #000;
+		}
+		.b-content {
+			opacity: 0.97;
+		}
+	}
+}
+
+.hideMessageListCheckbox {
+	.checkboxCheckAll {
+		visibility: hidden;
+	}
+
+	.checkboxMessage {
+		display: none;
+	}
+}
+
 .messageListItem {
+	display: flex;
+	flex-wrap: wrap;
 
 	position: relative;
 	font-size: 12px;
@@ -213,6 +235,12 @@ html.rl-no-preview-pane {
 
 	z-index: 100;
 
+	> * {
+		display: flex;
+		flex: 0 0 auto;
+		order: 0;
+	}
+
 	&.focused {
 		background-color: rgba(128, 128, 128, 0.1);
 		border-left-color: #ccc;
@@ -407,25 +435,21 @@ html.rl-no-preview-pane {
 	}
 }
 
-	&.message-focused {
+html.rl-ctrl-key-pressed .messageListItem {
-		.b-message-list-wrapper {
+	cursor: copy;
-			background-color: #000;
-		}
-		.b-content {
-			opacity: 0.97;
-		}
 }
 
-	&.hideMessageListCheckbox {
+@media screen and (min-width: 1000px) {
-		.checkboxMessage, .checkboxCheckAll {
+	.messageList {
-			visibility: hidden;
+		.listDragOver {
+			transition: all 400ms ease;
 		}
 	}
 }
 
 /* desktop-large */
 @media screen and (min-width: 1401px) {
-	.messageList .messageListItem {
+	.messageListItem {
 		font-size: 13px;
 		time {
 			font-size: 13px;
@@ -448,18 +472,6 @@ html .messageList .line-loading {
 	top: 0;
 }
 
-.messageListItem {
-
-	display: flex;
-	flex-wrap: wrap;
-
-	> * {
-		display: flex;
-		flex: 0 0 auto;
-		order: 0;
-	}
-}
-
 .rl-side-preview-pane, .rl-mobile {
 
 	.messageListItem {
@@ -471,7 +483,6 @@ html .messageList .line-loading {
 		.subjectParent {
 			flex: 1 0 auto;
 			line-height: 16px;
-			margin-left: 30px;
 			order: 1;
 			width: calc(100% - 120px);
 		}
@@ -492,9 +503,13 @@ html .messageList .line-loading {
 			order: 3;
 		}
 	}
+
+	.b-message-list-wrapper:not(.hideMessageListCheckbox) .subjectParent {
+		margin-left: 30px;
+	}
 }
 
-html:not(.rl-mobile):not(.rl-side-preview-pane) .messageList {
+html:not(.rl-mobile):not(.rl-side-preview-pane) {
 
 	.messageListItem {
 

dev/Styles/User/OpenPgpKey.less

@@ -1,6 +1,6 @@
 .b-open-pgp-key-view-content, .b-open-pgp-key-generate-content {
 	&.modal {
-		width: 570px;
+		max-width: 570px;
 	}
 }
 
@@ -13,7 +13,7 @@
 
 .b-compose-open-pgp-content {
 	&.modal {
-		width: 800px;
+		max-width: 800px;
 	}
 
 	.key-list {
@@ -97,7 +97,7 @@
 
 .b-message-open-pgp-content {
 	&.modal {
-		width: 700px;
+		max-width: 700px;
 	}
 
 	.key-list {
@@ -134,7 +134,7 @@
 
 .b-open-pgp-key-add-content {
 	&.modal {
-		width: 645px;
+		max-width: 645px;
 	}
 	.inputKey {
 		font-family: var(--fontMono);

dev/Styles/User/Shortcuts.less

@@ -1,7 +1,7 @@
 .rl-view-model {
 	.b-shortcuts-content {
 		&.modal {
-			width: 700px;
+			max-width: 700px;
 		}
 	}
 }

dev/Styles/User/Template.less

@@ -1,7 +1,7 @@
 .b-template-add-content {
 
 	&.modal {
-		width: 750px;
+		max-width: 750px;
 	}
 
 	.e-template-place {

dev/Styles/_BootstrapFix.less

@@ -51,19 +51,8 @@ label.inline, span.inline {
 	color: #b94a48;
 }
 
-.form-horizontal.long-label .control-group {
-	.control-label {
-		width: 160px;
-	}
-}
-
 /* mobile and tablet */
 @media screen and (max-width: 999px) {
-
-	.modal {
-		width: calc(100% - 20px);
-	}
-
 	.form-horizontal {
 		.control-group {
 			.control-label {

dev/Styles/_FontasticToBoot.less

@@ -63,7 +63,8 @@
 	margin: -1px -2px;
 }
 
-.icon-spinner:not(.not-animated) {
+.icon-spinner:not(.not-animated),
+.list-loading .icon-spinner.not-animated {
 	border-color: transparent;
 	border-top-color: #999;
 	animation: rotation .8s infinite ease-in-out;

dev/View/User/MailBox/MessageList.js

@@ -86,7 +86,6 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 
 		this.messageListCheckedOrSelected = MessageUserStore.listCheckedOrSelected;
 		this.messageListCompleteLoadingThrottle = MessageUserStore.listCompleteLoading;
-		this.messageListCompleteLoadingThrottleForAnimation = MessageUserStore.listLoadingAnimation;
 
 		initOnStartOrLangChange(() => this.emptySubjectValue = i18n('MESSAGE_LIST/EMPTY_SUBJECT_TEXT'));
 
@@ -670,31 +669,31 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 	}
 
 	onBuild(dom) {
-		const eqs = (ev, s) => ev.target.closestWithin(s, dom);
+		const eqs = (ev, s) => ev.target.closestWithin('.messageList '+s, dom);
 
 		this.selector.init(dom.querySelector('.b-content'), Scope.MessageList);
 
 		dom.addEventListener('click', event => {
 			ThemeStore.isMobile() && leftPanelDisabled(true);
 
-			if (eqs(event, '.messageList .b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) {
+			if (eqs(event, '.b-message-list-wrapper') && Scope.MessageView === AppUserStore.focusedState()) {
 				AppUserStore.focusedState(Scope.MessageList);
 			}
 
 			let el = eqs(event, '.e-paginator .e-page');
 			el && this.gotoPage(ko.dataFor(el));
 
-			eqs(event, '.messageList .checkboxCheckAll') && this.checkAll(!this.checkAll());
+			eqs(event, '.checkboxCheckAll') && this.checkAll(!this.checkAll());
 
-			el = eqs(event, '.messageList .messageListItem .flagParent');
+			el = eqs(event, '.messageListItem .flagParent');
 			el && this.flagMessages(ko.dataFor(el));
 
-			el = eqs(event, '.messageList .messageListItem .threads-len');
+			el = eqs(event, '.messageListItem .threads-len');
 			el && this.gotoThread(ko.dataFor(el));
 		});
 
 		dom.addEventListener('dblclick', event => {
-			let  el = eqs(event, '.messageList .messageListItem .actionHandle');
+			let  el = eqs(event, '.messageListItem .actionHandle');
 			el && this.gotoThread(ko.dataFor(el));
 		});
 

package.json

@@ -67,6 +67,7 @@
     "rimraf": "3.0.2"
   },
   "dependencies": {
+    "gulp-group-css-media-queries": "^1.2.2",
     "gulp-rollup-2": "^1.2.1",
     "rollup": "^2.38.0",
     "rollup-plugin-external-globals": "^0.6.1",

plugins/change-password/index.php

@@ -6,9 +6,9 @@ class ChangePasswordPlugin extends \RainLoop\Plugins\AbstractPlugin
 {
 	const
 		NAME     = 'Change Password',
-		VERSION  = '2.1',
+		VERSION  = '2.2',
-		RELEASE  = '2021-03-18',
+		RELEASE  = '2021-07-20',
-		REQUIRED = '2.4.0',
+		REQUIRED = '2.5.0',
 		CATEGORY = 'Security',
 		DESCRIPTION = 'This plugin allows you to change passwords of email accounts';
 
@@ -23,6 +23,7 @@ class ChangePasswordPlugin extends \RainLoop\Plugins\AbstractPlugin
 	{
 		$this->UseLangs(true); // start use langs folder
 
+		$this->addCss('style.less');
 		$this->addJs('js/ChangePasswordUserSettings.js'); // add js file
 		$this->addJsonHook('ChangePassword', 'ChangePassword');
 		$this->addTemplate('templates/SettingsChangePassword.html');

plugins/change-password/style.less

@@ -0,0 +1,5 @@
+.form-horizontal.change-password .control-group {
+	.control-label {
+		width: 160px;
+	}
+}

plugins/change-password/templates/SettingsChangePassword.html

@@ -1,5 +1,5 @@
 <div class="b-settings-general g-ui-user-select-none">
-	<div class="form-horizontal long-label">
+	<div class="form-horizontal change-password">
 		<div class="legend" data-i18n="SETTINGS_CHANGE_PASSWORD/LEGEND_CHANGE_PASSWORD"></div>
 		<div class="row">
 			<div class="span6">

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

@@ -1,5 +1,3 @@
 <div class="e-paginator g-ui-user-select-none" data-bind="foreach: $data">
-	<a class="e-page" data-bind="css: { 'current': current, 'custom': custom }, title: title">
+	<a class="e-page" data-bind="css: { 'current': current, 'custom': custom }, title: title, text: name"></a>
-		<span class="e-page-number" data-bind="text: name"></span>
-	</a>
 </div>

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

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

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

@@ -1,6 +1,5 @@
-<div id="rl-sub-left">
+<div id="rl-sub-left" class="messageList g-ui-user-select-none"
-	<div class="messageList g-ui-user-select-none"
+	data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused() }">
-		data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused(), 'hideMessageListCheckbox': !useCheckboxesInList() }">
 	<div class="toolbar">
 		<div class="btn-toolbar">
 			<a class="btn btn-thin-2 fontastic show-mobile" data-bind="click: hideLeft, visible: !leftPanelDisabled()">❮</a>
@@ -8,8 +7,8 @@
 			<a class="btn buttonCompose show-mobile" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: allowComposer && mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
 				<i class="icon-paper-plane"></i>
 			</a>
-				<a class="btn buttonReload" data-bind="command: reloadCommand, visible: allowReload && mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
+			<a class="btn" data-bind="command: reloadCommand, visible: allowReload && mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
-					<i class="icon-spinner" data-bind="css: {'not-animated': !messageListCompleteLoadingThrottleForAnimation()}"></i>
+				<i class="icon-spinner not-animated"></i>
 			</a>
 			<!-- ko if: !newMoveToFolder -->
 			<div class="btn-group dropdown colored-toggle hide-mobile" data-bind="visible: allowMessageListActions, registerBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
@@ -156,7 +155,7 @@
 			</div>
 		</div>
 	</div>
-		<div class="b-message-list-wrapper">
+	<div class="b-message-list-wrapper" data-bind="css: {'hideMessageListCheckbox': !useCheckboxesInList() }">
 		<div class="second-toolbar thm-message-list-top-toolbar">
 			<div class="form-inline">
 				<i class="checkboxCheckAll fontastic" data-bind="text: checkAll() ? (isIncompleteChecked() ? '▣' : '☑') : '☐'"></i>
@@ -255,4 +254,3 @@
 		</div>
 	</div>
 </div>
-</div>

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

@@ -121,7 +121,7 @@
 	border-bottom-color: #444;
 }
 
-.messageList .messageListItem {
+.messageListItem {
 	border-left-color: #111;
     color: #EEE;
 }

tasks/css.js

@@ -8,6 +8,7 @@ const eol = require('gulp-eol');
 const livereload = require('gulp-livereload');
 const filter = require('gulp-filter');
 const expect = require('gulp-expect-file');
+const gcmq = require('gulp-group-css-media-queries');
 
 const { config } = require('./config');
 const { del } = require('./common');
@@ -85,6 +86,7 @@ const cssBootMin = () => {
 const cssMainMin = () => {
 	return gulp
 		.src(config.paths.staticCSS + config.paths.css.main.name)
+		.pipe(gcmq())
 		.pipe(cleanCss())
 		.pipe(rename({ suffix: '.min' }))
 		.pipe(eol('\n', true))
@@ -94,6 +96,7 @@ const cssMainMin = () => {
 const cssAdminMin = () => {
 	return gulp
 		.src(config.paths.staticCSS + config.paths.css.admin.name)
+		.pipe(gcmq())
 		.pipe(cleanCss())
 		.pipe(rename({ suffix: '.min' }))
 		.pipe(eol('\n', true))

vendors/bootstrap/less/forms.less

@@ -84,6 +84,7 @@ textarea {
 // Reset height since textareas have rows
 textarea {
   height: auto;
+  resize: none;
 }
 // Everything else
 textarea,

vendors/bootstrap/less/modals.less

@@ -8,7 +8,8 @@
   position: relative;
   z-index: @zindexModal;
   overflow: hidden;
-  width: 560px;
+  width: calc(100% - 20px);
+  max-width: 560px;
   margin: 10px auto;
   background-color: @white;
   border: 1px solid rgba(0,0,0,.3);

yarn.lock

@@ -871,6 +871,30 @@ cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
+css-parse@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4"
+  integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=
+  dependencies:
+    css "^2.0.0"
+
+css-stringify@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/css-stringify/-/css-stringify-2.0.0.tgz#2ef33dcf498c3d3ee82bd73d0a01ac28628cd0fa"
+  integrity sha1-LvM9z0mMPT7oK9c9CgGsKGKM0Po=
+  dependencies:
+    css "^2.0.0"
+
+css@^2.0.0:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
+  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
+  dependencies:
+    inherits "^2.0.3"
+    source-map "^0.6.1"
+    source-map-resolve "^0.5.2"
+    urix "^0.1.0"
+
 d@1, d@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
@@ -1603,6 +1627,14 @@ graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+group-css-media-queries@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/group-css-media-queries/-/group-css-media-queries-1.4.1.tgz#8e54cb31cc45a9c5e08eb838940b8a28038d7175"
+  integrity sha1-jlTLMcxFqcXgjrg4lAuKKAONcXU=
+  dependencies:
+    css-parse "^2.0.0"
+    css-stringify "^2.0.0"
+
 gulp-cached@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/gulp-cached/-/gulp-cached-1.1.1.tgz#fe7cd4f87f37601e6073cfedee5c2bdaf8b6acce"
@@ -1697,6 +1729,15 @@ gulp-filter@6.0.0:
     plugin-error "^1.0.1"
     streamfilter "^3.0.0"
 
+gulp-group-css-media-queries@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/gulp-group-css-media-queries/-/gulp-group-css-media-queries-1.2.2.tgz#c0436b9474086cbe1ab3eb5bc1a3afef4d6b37d6"
+  integrity sha512-uOs8aJ5TV12aRstfc6pn107edDT2XSY7KNAU721Dz+gKHu/AUIlAaOdFdo9n/eHWqfb9QWMArrM8fiPOCqZPGg==
+  dependencies:
+    group-css-media-queries "^1.4.1"
+    plugin-error "^1.0.1"
+    through2 "^2.0.3"
+
 gulp-header@2.0.9:
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/gulp-header/-/gulp-header-2.0.9.tgz#8b432c4d4379dee6788845b16785b09c7675af84"
@@ -3695,7 +3736,7 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-source-map-resolve@^0.5.0:
+source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
   integrity sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==