Reduce more CSS

dev/Styles/Components.less

@@ -4,24 +4,18 @@
 	left: 0;
 	width: 18px;
 	height: 18px;
-	border: solid 2px #999;
+	border: 2px solid #999;
 
 	transform: rotate(0deg);
 }
 
 .checkbox-mark-sizes() {
-/*	top: -4px;
-	left: 6px;
-	width: 10px;
-	height: 21px;*/
-
 	top: -1px;
 	left: 5px;
 	width: 10px;
 	height: 18px;
 
-	border-right-width: 2px;
-	border-bottom-width: 2px;
+	border-width: 0 2px 2px 0;
 
 	transform: rotate(45deg);
 }
@@ -40,8 +34,7 @@
 	&.e-select {
 
 		select:focus {
-			outline: 1px;
-			outline-style: dotted;
+			outline: 1px dotted;
 		}
 	}
 
@@ -54,8 +47,7 @@
 		cursor: pointer;
 
 		&:focus {
-			outline: 1px;
-			outline-style: dotted;
+			outline: 1px dotted;
 		}
 
 		.e-checkbox-icon {
@@ -63,10 +55,9 @@
 		}
 
 		&.disabled {
-			cursor: default;
-			color: #999;
+			cursor: not-allowed;
+			opacity: 0.5;
 			outline: 0;
-			outline-style: none;
 		}
 	}
 
@@ -75,8 +66,8 @@
 		cursor: pointer;
 
 		&.disabled {
-			cursor: default;
-			color: #999;
+			cursor: not-allowed;
+			opacity: 0.5;
 		}
 	}
 }
@@ -112,8 +103,6 @@
 		}
 
 		.sub-checkbox.checked {
-			border-top: none;
-			border-left: none;
 			border-color: #0F9D58;
 
 			.checkbox-mark-sizes();
@@ -126,8 +115,6 @@
 				animation: box-shrink 140ms ease-out forwards;
 			}
 			&.checkmark {
-				border-left: none;
-				border-top: none;
 				animation: checkmark-expand 140ms ease-out forwards;
 			}
 		}
@@ -137,24 +124,10 @@
 				animation: box-expand 140ms ease-out forwards;
 			}
 			&.checkmark {
-				border-left: none;
-				border-top: none;
 				transform: rotate(45deg);
 				animation: checkmark-shrink 140ms ease-out forwards;
 			}
 		}
-
-		&.disabled {
-			.sub-checkbox {
-				border-color: #aaa;
-				cursor: not-allowed;
-				color: #aaa;
-			}
-			.sub-label {
-				cursor: not-allowed;
-				color: #aaa;
-			}
-		}
 	}
 }
 

dev/Styles/FolderList.less

@@ -66,11 +66,11 @@
 
 	hr {
 		margin: 10px;
-		border-top: 0 solid #000;
+		border-top: 0;
 		border-bottom: 1px solid #999;
 	}
 
-	.b-content .e-item {
+	.e-item {
 
 		overflow: hidden;
 		white-space: nowrap;
@@ -173,16 +173,16 @@
 				font-weight: bold;
 			}
 
+			&.hidden {
+				display: none;
+			}
+
 			.e-collapsed-sign {
 				cursor: pointer;
 				vertical-align: inherit;
 			}
 		}
 
-		.hidden.e-link {
-			display: none;
-		}
-
 		.b-sub-folders.collapsed {
 			max-height: 0;
 			height: 0;

dev/Styles/MessageList.less

@@ -278,6 +278,7 @@ html.rl-no-preview-pane {
 		}
 
 		.senderParent, .subjectParent {
+			overflow: hidden;
 			white-space: nowrap;
 		}
 

dev/Styles/OpenPgpKey.less

@@ -4,12 +4,7 @@
 	}
 }
 
-.b-open-pgp-key-view-content, .b-open-pgp-key-generate-content, .b-open-pgp-key-add-content, .b-compose-open-pgp-content, .b-message-open-pgp-content {
-
-	.inputKey {
-		font-family: var(--fontMono);
-	}
-
+.b-open-pgp-key-view-content {
 	.key-viewer {
 		max-height: 500px;
 		overflow: auto;
@@ -94,8 +89,8 @@
 		margin-top: 10px;
 		min-height: 40px;
 
-		select option.even {
-			background-color: #f5f5f5;
+		select option:nth-child(even) {
+			background-color: rgba(128, 128, 128, 0.1);
 		}
 	}
 }
@@ -139,12 +134,11 @@
 
 .b-open-pgp-key-add-content {
 	&.modal {
-
 		width: 645px;
+	}
+	.inputKey {
+		font-family: var(--fontMono);
+		width: 600px;
 
-		.inputKey {
-			width: 600px;
-
-		}
 	}
 }

dev/View/Popup/ComposeOpenPgp.js

@@ -44,15 +44,14 @@ class ComposeOpenPgpPopupView extends AbstractViewPopup {
 			encryptKeysView:  () => this.encryptKeys.map(oKey => (oKey ? oKey.key : null)).filter(v => v),
 
 			privateKeysOptions: () => {
-				const opts = PgpStore.openpgpkeysPrivate().map((oKey, iIndex) => {
+				const opts = PgpStore.openpgpkeysPrivate().map(oKey => {
 					if (this.signKey() && this.signKey().key.id === oKey.id) {
 						return null;
 					}
 					return oKey.users.map(user => ({
 						'id': oKey.guid,
 						'name': '(' + oKey.id.substr(KEY_NAME_SUBSTR).toUpperCase() + ') ' + user,
-						'key': oKey,
-						'class': iIndex % 2 ? 'odd' : 'even'
+						'key': oKey
 					}));
 				});
 
@@ -60,15 +59,14 @@ class ComposeOpenPgpPopupView extends AbstractViewPopup {
 			},
 
 			publicKeysOptions: () => {
-				const opts = PgpStore.openpgpkeysPublic().map((oKey, index) => {
+				const opts = PgpStore.openpgpkeysPublic().map(oKey => {
 					if (this.encryptKeysView().includes(oKey)) {
 						return null;
 					}
 					return oKey.users.map(user => ({
 						'id': oKey.guid,
 						'name': '(' + oKey.id.substr(KEY_NAME_SUBSTR).toUpperCase() + ') ' + user,
-						'key': oKey,
-						'class': index % 2 ? 'odd' : 'even'
+						'key': oKey
 					}));
 				});
 				return opts.flat().filter(v => v);
@@ -94,14 +92,6 @@ class ComposeOpenPgpPopupView extends AbstractViewPopup {
 
 		this.defaultOptionsAfterRender = defaultOptionsAfterRender;
 
-		this.addOptionClass = (domOption, item) => {
-			this.defaultOptionsAfterRender(domOption, item);
-
-			if (item && undefined !== item.class && domOption) {
-				domOption.classList.add(item.class);
-			}
-		};
-
 		this.deletePublickKey = this.deletePublickKey.bind(this);
 
 		decorateKoCommands(this, {

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

@@ -79,12 +79,10 @@
 						data-i18n="[placeholder]GLOBAL/PASSWORD"
 						data-bind="textInput: password, onEnter: doCommand" />
 					<select class="input-block-level" data-bind="visible: 0 < privateKeysOptions().length, options: privateKeysOptions, value: selectedPrivateKey,
-						optionsCaption: privateKeysOptionsCaption, optionsText: 'name', optionsValue: 'id',
-						optionsAfterRender: addOptionClass"></select>
+						optionsCaption: privateKeysOptionsCaption, optionsText: 'name', optionsValue: 'id'"></select>
 				</div>
 				<select class="input-block-level" data-bind="visible: encrypt() && 0 < publicKeysOptions().length, options: publicKeysOptions, value: selectedPublicKey,
-					optionsCaption: publicKeysOptionsCaption, optionsText: 'name', optionsValue: 'id',
-					optionsAfterRender: addOptionClass"></select>
+					optionsCaption: publicKeysOptionsCaption, optionsText: 'name', optionsValue: 'id'"></select>
 			</div>
 		</div>
 		<div class="modal-footer">