Reduce/simplify CSS footprint

dev/Screen/AbstractSettings.js

@@ -2,7 +2,7 @@ import ko from 'ko';
 
 import { pString } from 'Common/Utils';
 import { settings } from 'Common/Links';
-import { createElement, elementById } from 'Common/Globals';
+import { createElement/*, elementById*/ } from 'Common/Globals';
 
 import { AbstractScreen } from 'Knoin/AbstractScreen';
 import { i18nToNodes } from 'Common/Translator';
@@ -29,7 +29,8 @@ export class AbstractSettingsScreen extends AbstractScreen {
 			);
 
 		if (RoutedSettingsViewModel) {
-			const vmPlace = elementById('rl-settings-subscreen');
+//			const vmPlace = elementById('V-SettingsPane') || elementById('V-AdminPane);
+			const vmPlace = this.viewModels[1].__dom;
 			if (RoutedSettingsViewModel.__vm) {
 				settingsScreen = RoutedSettingsViewModel.__vm;
 			} else if (vmPlace) {

dev/Screen/User/Settings.js

@@ -22,7 +22,7 @@ import { SettingsPaneUserView } from 'View/User/Settings/Pane';
 
 export class SettingsUserScreen extends AbstractSettingsScreen {
 	constructor() {
-		super([SystemDropDownUserView, SettingsMenuUserView, SettingsPaneUserView]);
+		super([SettingsMenuUserView, SettingsPaneUserView, SystemDropDownUserView]);
 
 		const views = [
 			UserSettingsGeneral

dev/Stores/User/Settings.js

@@ -53,8 +53,8 @@ export const SettingsUserStore = new class {
 
 		const toggleLayout = () => {
 			const value = ThemeStore.isMobile() ? 0 : self.layout();
-			$htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value);
+			$htmlCL.toggle('sm-msgView-side', Layout.SidePreview === value);
-			$htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value);
+			$htmlCL.toggle('sm-msgView-bottom', Layout.BottomPreview === value);
 			fireEvent('rl-layout', value);
 		};
 		self.layout.subscribe(toggleLayout);

dev/Styles/Admin/Layout.less

@@ -39,6 +39,14 @@
 	height: calc(100% - 50px - @rlLowMargin);
 	margin: 50px @rlLowMargin 0 0;
 
+	background-color: var(--settings-bg-clr, #fff);
+	border: 1px solid var(--border-color, #aaa);
+	border-radius: var(--border-radius, 5px);
+	box-shadow: var(--smMainShadow);
+	overflow-y: auto;
+	padding: 20px;
+	scroll-behavior: smooth;
+
 	> .b-toolbar {
 		color: #fff;
 		display: flex;
@@ -61,17 +69,6 @@
 	padding-right: 12px;
 }
 
-#rl-settings-subscreen {
-	background-color: var(--settings-bg-clr, #fff);
-	border: 1px solid var(--border-color, #aaa);
-	border-radius: var(--border-radius, 5px);
-	box-shadow: var(--smMainShadow);
-	height: 100%;
-	overflow-y: auto;
-	padding: 20px;
-	scroll-behavior: smooth;
-}
-
 /* desktop */
 @media screen and (min-width: @maxMobileWidth + 1px) {
 	.toggleLeft {
@@ -93,9 +90,6 @@
 
 	#V-AdminPane {
 		margin-right: 0;
-	}
-
-	#rl-settings-subscreen {
 		padding: 10px;
 	}
 

dev/Styles/Languages.less

@@ -34,7 +34,7 @@
 	}
 }
 
-@media screen and (max-width: 733px) {
+@media screen and (max-width: 480px) {
 	#V-PopupsLanguages label {
 		width: 100%;
 	}

dev/Styles/Ui.less

@@ -1,5 +1,4 @@
 
-#rl-settings-subscreen,
 .g-ui-user-select-none {
 	user-select: none;
 	-webkit-touch-callout: none;

dev/Styles/User/AdvancedSearch.less

@@ -10,7 +10,7 @@
 	margin-right:1em;
 }
 
-@media screen and (max-width: 410px) {
+@media screen and (max-width: 480px) {
 	#advancedsearchform label {
 		width: 100%;
 	}

dev/Styles/User/Contacts.less

@@ -203,7 +203,7 @@
 	}
 }
 
-@media screen and (max-width: 900px) {
+@media screen and (max-width: @maxMobileWidth) {
 	#V-PopupsContacts {
 		width: 100%;
 	}

dev/Styles/User/FolderList.less

@@ -208,24 +208,19 @@
 /**/
 }
 
-.btn {
+#rl-left .buttonCompose {
-	&.buttonCompose {
+	max-height: 2em;
-		max-height: 2em;
+	max-width: fit-content;
-		max-width: fit-content;
+	overflow: hidden;
-		overflow: hidden;
+	width: calc(100% - 48px);
-		width: calc(100% - 48px);
-	}
 }
 
 html.rl-left-panel-disabled {
-	.buttonComposeText{
+	.buttonComposeText,
+	.buttonContacts {
 		display: none;
 	}
-	.btn.buttonCompose {
+	#rl-left .buttonCompose {
 		width: auto;
 	}
-	.btn.buttonContacts {
-		margin-top: 10px !important;
-		margin-left: 0 !important;
-	}
 }

dev/Styles/User/Layout.less

@@ -152,13 +152,14 @@ html.rl-left-panel-disabled {
 	}
 }
 
+.resizer {
+	display: none;
+}
+
 @media screen and (max-width: @maxMobileWidth) {
 	#rl-app {
 		#V-SettingsPane {
 			margin-right: 0;
-		}
-
-		#rl-settings-subscreen {
 			padding: 10px;
 		}
 	}
@@ -181,9 +182,7 @@ html.rl-left-panel-disabled {
 		line-height: 2.5;
 	}
 
-	.hide-mobile,
+	.hide-mobile {
-	#rl-left .resizer,
-	#rl-right .resizer {
 		display: none !important;
 	}
 }
@@ -195,44 +194,36 @@ html.rl-left-panel-disabled {
 		display: none !important;
 	}
 
-	.rl-bottom-preview-pane #rl-right {
+	.sm-msgView-bottom #rl-right {
 		flex-direction: column;
 	}
 
 	.resizer {
 		background: #aaa;
 		background: rgba(255,255,255,0.5);
-		display: none;
 		opacity: 0;
 		position: absolute;
+		bottom: 0;
+		right: 0;
 		z-index: 102;
 	}
 	.resizer:hover {
 		opacity: 1;
 	}
-	#rl-left > .resizer,
+	html:not(.rl-left-panel-disabled) #rl-left > .resizer,
-	.rl-side-preview-pane #V-MailMessageList .resizer {
+	.sm-msgView-side #V-MailMessageList .resizer {
 		cursor: ew-resize;
 		cursor: col-resize;
-		right: 0;
+		display: block;
 		top: 0;
-		bottom: 0;
 		width: 5px;
 	}
-	.rl-bottom-preview-pane #V-MailMessageList .resizer {
+	.sm-msgView-bottom #V-MailMessageList .resizer {
 		cursor: ns-resize;
 		cursor: row-resize;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		height: 5px;
-	}
-	html:not(.rl-left-panel-disabled) #rl-left > .resizer,
-	#V-MailMessageList .resizer {
 		display: block;
-	}
+		left: 0;
-	html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) #rl-right .resizer {
+		height: 5px;
-		display: none !important;
 	}
 }
 

dev/Styles/User/MessageList.less

@@ -1,6 +1,8 @@
 
 #V-MailMessageList {
 	position: relative;
+	height: 100%;
+	width: 100%;
 }
 
 #V-MailMessageList.focused .messageList {
@@ -357,27 +359,15 @@
 	}
 }
 
-html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
+html:not(.sm-msgView-bottom):not(.sm-msgView-side) .message-selected #V-MailMessageList {
-	.message-selected #V-MailMessageList {
+	display: none;
-		display: none;
-	}
-	#V-MailMessageList {
-		height: 100%;
-		width: 100%;
-	}
 }
 
 @media screen and (max-width: @maxMobileWidth) {
-	#V-MailMessageList .btn-toolbar:not(.hasChecked) .onCheckedShow {
+	#V-MailMessageList .btn-toolbar:not(.hasChecked) .onCheckedShow,
+	#V-MailMessageList .hasChecked .onCheckedHide {
 		display: none;
 	}
-	#V-MailMessageList .hasChecked {
-		.buttonCompose,
-		.onCheckedHide,
-		.sortFolder {
-			display: none;
-		}
-	}
 }
 
 @media screen and (min-width: @maxMobileWidth + 1px) {
@@ -396,23 +386,29 @@ html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
 		}
 	}
 
-	.rl-side-preview-pane #V-MailMessageList {
+	.sm-msgView-side #V-MailMessageList {
-		height: 100%;
+		width: unset;
-	}
+
-	.rl-side-preview-pane #V-MailMessageList .messageList {
+		.messageList {
-		max-width: 50vw;
+			max-width: 50vw;
-		min-width: 320px;
+			min-width: 320px;
-		overflow: auto;
+			overflow: auto;
-		resize: horizontal;
+			resize: horizontal;
-		width: 35vw;
+			width: 35vw;
+		}
 	}
 
-	.rl-bottom-preview-pane #V-MailMessageList .messageList {
+	.sm-msgView-bottom #V-MailMessageList {
-		height: 35vh;
+		height: unset;
-		max-height: 50vh;
+		width: unset;
-		min-height: 200px;
+
-		overflow: auto;
+		.messageList {
-		resize: vertical;
+			height: 35vh;
+			max-height: 50vh;
+			min-height: 200px;
+			overflow: auto;
+			resize: vertical;
+		}
 	}
 }
 
@@ -437,7 +433,7 @@ html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
 	top: 0;
 }
 
-.rl-side-preview-pane, .rl-mobile {
+.sm-msgView-side, .rl-mobile {
 
 	.messageListItem > div + div {
 		flex-wrap: wrap;

dev/Styles/User/MessageView.less

@@ -33,7 +33,7 @@
 #V-MailMessageView .top-toolbar {
 	color: #fff;
 	padding: 10px 0;
-	visibility: hidden;
+	visibility: visible;
 }
 
 .messageView {
@@ -461,21 +461,19 @@
 	}
 }
 
-html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
+html:not(.sm-msgView-bottom):not(.sm-msgView-side) {
 	#rl-right:not(.message-selected) #V-MailMessageView {
 		display: none;
 	}
+}
+
+html.sm-msgView-side {
 	#V-MailMessageView .top-toolbar {
-		padding-left: 1px;
+		visibility: hidden;
-		visibility: visible;
-	}
-	.messageView {
-		border: 1px solid var(--border-color, #aaa);
-		box-shadow: var(--smMainShadow);
 	}
 }
 
-html.rl-bottom-preview-pane {
+html.sm-msgView-bottom {
 	#V-MailMessageView .top-toolbar {
 		display: none;
 	}

dev/Styles/User/OpenPgpKey.less

@@ -3,9 +3,10 @@
 }
 
 #V-PopupsOpenPgpKey {
-	.key-viewer {
+	pre {
 		margin: 0;
 		max-height: 500px;
+		padding: 0;
 		overflow: auto;
 	}
 }
@@ -13,9 +14,8 @@
 #V-PopupsOpenPgpImport {
 	max-width: 645px;
 
-	.inputKey {
+	textarea {
 		font-family: var(--fontMono);
 		width: 600px;
-
 	}
 }

dev/Styles/User/Settings.less

@@ -32,8 +32,16 @@
 #V-SettingsPane {
 	height: calc(100% - 50px - @rlLowMargin);
 	margin: 50px @rlLowMargin 0 0;
+	padding:20px;
 	width: 100%;
 
+	background-color: var(--settings-bg-clr, #fff);
+	border: 1px solid var(--border-color, #aaa);
+	border-radius: var(--border-radius, 5px);
+	box-shadow: var(--smMainShadow);
+	overflow-y: auto;
+	scroll-behavior: smooth;
+
 	.btn-toolbar {
 		position: absolute;
 		top: 8px;
@@ -46,18 +54,7 @@
 	}
 }
 
-#rl-settings-subscreen {
+.firefox-drag #V-SettingsPane,
-	background-color: var(--settings-bg-clr, #fff);
-	border: 1px solid var(--border-color, #aaa);
-	border-radius: var(--border-radius, 5px);
-	box-shadow: var(--smMainShadow);
-	height: 100%;
-	overflow-y: auto;
-	padding:20px;
-	scroll-behavior: smooth;
-}
-
-.firefox-drag #rl-settings-subscreen,
 .firefox-drag .modal-body {
 	overflow: hidden;
 }

dev/Styles/_End.less

@@ -19,7 +19,7 @@
 	white-space: nowrap;
 	z-index: 2001;
 }
-@media only screen and (max-width: 600px) {
+@media screen and (max-width: @maxMobileWidth) {
 	[data-rainloopErrorTip]::before {
 		min-width: 60vw;
 		white-space: normal;

snappymail/v/0.0.0/app/libraries/snappymail/http/csp.php

@@ -50,6 +50,9 @@ class CSP
 		foreach ($this->directives as $directive => $sources) {
 			$params[] = $directive . ' ' . \implode(' ', \array_unique($sources));
 		}
+//		if (empty($this->directives['frame-ancestors'])) {
+//			$params[] = "frame-ancestors 'none';";
+//		}
 		return \implode('; ', $params);
 	}
 

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

@@ -3,4 +3,3 @@
 	<h4>SnappyMail - <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span></h4>
 	<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
 </div>
-<div id="rl-settings-subscreen"></div>

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

@@ -1,6 +1,6 @@
 <div class="btn-toolbar" data-bind="css: {'hasChecked':checkAll}">
 	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
-	<a class="btn buttonCompose" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
+	<a class="btn buttonCompose onCheckedHide" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
 		<i class="icon-paper-plane"></i>
 	</a>
 	<a class="btn onCheckedHide" data-bind="click: reload" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
@@ -68,7 +68,7 @@
 			</li>
 		</menu>
 	</div>
-	<div class="btn-group dropdown sortFolder" data-bind="visible: sortSupported(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
+	<div class="btn-group dropdown onCheckedHide" data-bind="visible: sortSupported(), registerBootstrapDropdown: true, openDropdownTrigger: sortDropdownTrigger">
 		<a id="sort-list-dropdown-id" class="btn dropdown-toggle fontastic" href="#" tabindex="-1" data-i18n="[title]MESSAGE_LIST/SORT" data-bind="text: sortText">⬇</a>
 		<menu class="dropdown-menu" role="menu" aria-labelledby="sort-list-dropdown-id">
 			<li role="presentation" data-sort="" data-bind="click: changeSort">

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

@@ -2,10 +2,10 @@
 	<a href="#" class="close" data-bind="click: close">×</a>
 	<h3 data-i18n="OPENPGP/POPUP_IMPORT_TITLE"></h3>
 </header>
-<form id="openpgp-import" class="modal-body form-horizontal" autocomplete="off" data-bind="submit: submitForm">
+<form id="openpgp-import" class="modal-body" autocomplete="off" data-bind="submit: submitForm">
 	<div class="alert"  data-bind="visible: keyError() && keyErrorMessage(), text: keyErrorMessage"></div>
 	<div class="control-group" data-bind="css: {'error': keyError}">
-		<textarea class="inputKey input-xxlarge" rows="14" autofocus="" autocomplete="off" data-bind="value: key" required=""></textarea>
+		<textarea class="input-xxlarge" rows="14" autofocus="" autocomplete="off" data-bind="value: key" required=""></textarea>
 	</div>
 	<div class="control-group">
 <!--

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

@@ -3,11 +3,7 @@
 	<h3 data-i18n="OPENPGP/POPUP_VIEW_TITLE"></h3>
 </header>
 <div class="modal-body">
-	<div class="form-horizontal">
+	<pre data-bind="initDom: keyDom, text: key"></pre>
-		<div class="control-group">
-			<pre class="key-viewer" data-bind="initDom: keyDom, text: key"></pre>
-		</div>
-	</div>
 </div>
 <footer>
 	<a class="btn buttonClose" data-bind="click: close" data-icon="✖" data-i18n="GLOBAL/CLOSE"></a>

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

@@ -1,4 +1,3 @@
 <div class="btn-toolbar" data-bind="visible: leftPanelDisabled">
 	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel">❯</a>
 </div>
-<div id="rl-settings-subscreen"></div>

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

@@ -38,6 +38,7 @@
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
 	/* SETTINGS */
+	--settings-bg-clr: #333;
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: #444;
@@ -98,7 +99,6 @@
 }
 
 #rl-popups > dialog,
-#rl-settings-subscreen,
 .messageList,
 .messageView,
 .alert-info,

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

@@ -39,6 +39,7 @@
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
 	/* SETTINGS */
+	--settings-bg-clr: #333;
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: #444;
@@ -99,7 +100,6 @@
 }
 
 #rl-popups > dialog,
-#rl-settings-subscreen,
 .messageList,
 .messageView,
 .alert-info,

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

@@ -38,6 +38,7 @@
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
 	/* SETTINGS */
+	--settings-bg-clr: #333;
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: #444;
@@ -98,7 +99,6 @@
 }
 
 #rl-popups > dialog,
-#rl-settings-subscreen,
 .messageList,
 .messageView,
 .alert-info,

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

@@ -38,6 +38,7 @@
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
 	/* SETTINGS */
+	--settings-bg-clr: #333;
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: #444;
@@ -98,7 +99,6 @@
 }
 
 #rl-popups > dialog,
-#rl-settings-subscreen,
 .messageList,
 .messageView,
 .alert-info,

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

@@ -39,6 +39,7 @@
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
 	/* SETTINGS */
+	--settings-bg-clr: #333;
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: #444;
@@ -99,7 +100,6 @@
 }
 
 #rl-popups > dialog,
-#rl-settings-subscreen,
 .messageList,
 .messageView,
 .alert-info,

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

@@ -39,6 +39,7 @@
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
 	/* SETTINGS */
+	--settings-bg-clr: #000;
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: rgba(0,0,0,0.5);
@@ -92,7 +93,6 @@
 }
 
 #rl-popups > dialog,
-#rl-settings-subscreen,
 .messageList,
 .messageView,
 .alert-info,

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

@@ -38,6 +38,7 @@
 	--folders-drop-bg-color: rgba(0,0,0,0.5);
 
 	/* SETTINGS */
+	--settings-bg-clr: #333;
 	--settings-menu-color: #fff;
 	--settings-menu-selected-color: #fff;
 	--settings-menu-selected-bg-color: #444;
@@ -98,7 +99,6 @@
 }
 
 #rl-popups > dialog,
-#rl-settings-subscreen,
 .messageList,
 .messageView,
 .alert-info,