Cleanup fontastic

dev/External/Admin/ko.js

@@ -11,8 +11,8 @@ ko.bindingHandlers.saveTrigger = {
 		if ('custom' === element.saveTriggerType) {
 			element.append(
 				'  ',
-				Element.fromHTML('<i class="icon-spinner animated"></i>'),
-				Element.fromHTML('<i class="icon-remove error"></i>'),
+				Element.fromHTML('<i class="icon-spinner"></i>'),
+				Element.fromHTML('<i class="fontastic error">✖</i>'),
 				Element.fromHTML('<i class="icon-ok success"></i>')
 			);
 			element.classList.add('settings-saved-trigger');

dev/Stores/User/Pgp.js

@@ -352,7 +352,7 @@ class PgpUserStore {
 			if (encrypted || signed) {
 				const domText = dom.textContent;
 
-				verControl = Element.fromHTML('<div class="b-openpgp-control"><i class="icon-lock"></i></div>'); // 🔒
+				verControl = Element.fromHTML('<div class="b-openpgp-control"><i class="fontastic">🔒</i></div>');
 				if (encrypted) {
 					verControl.title = i18n('MESSAGE/PGP_ENCRYPTED_MESSAGE_DESC');
 					verControl.addEventHandler('click', domControlEncryptedClickHelper(this, dom, domText, recipients));

dev/Styles/SettingsGeneral.less

@@ -5,20 +5,6 @@
 		margin-right: 15px;
 	}
 
-	.notification-desc-denied {
-		color: #999;
-		display: none;
-	}
-
-	.denied-by-browser {
-		.notification-desc-denied {
-			display: inline;
-		}
-		.notification-desc {
-			color: #999;
-		}
-	}
-
 	.flag-selector {
 		padding-top: 5px;
 	}

dev/Styles/_FontasticToBoot.less

@@ -1,43 +1,36 @@
 
+.fontastic,
 [class^="icon-"],
 [class*=" icon-"] {
 	display: inline-block;
-	width: 16px;
-	height: 16px;
+	width: 1em;
+	height: 1em;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
 	line-height: 1;
 	font-size: 16px;
 	vertical-align: text-top;
 
-	.disabled &, .btn[disabled] &{
+	.disabled &:not(.icon-white),
+	.btn[disabled] &:not(.icon-white){
 		color: grey;
-		&.icon-white {
-			color: #fff;
-		}
 	}
 }
 
 .icon-folder, .icon-folder-add, .icon-list {
-	line-height: 18px;
 	font-size: 18px;
 	margin-top: -1px;
 	margin-left: -1px;
 	width: 17px;
 }
 
-.iconsize50 {
-	line-height: 50px;
-	font-size: 50px;
-	width: 50px;
-	height: 50px;
-}
-
 .iconsize24 {
-	line-height: 24px;
 	font-size: 24px;
 }
 
 .iconsize20 {
-	line-height: 20px;
 	font-size: 20px;
 }
 
@@ -89,45 +82,6 @@
 	color: red;
 }
 
-.iconcolor-white {
-	color: white;
-}
-
-.iconcolor-grey {
-	color: #aaa;
-}
-
-.denied-by-browser {
-	cursor: default;
-	.icon-checkbox-checked, icon-checkbox-unchecked {
-		cursor: default;
-	}
-}
-
-.right-mini, .down-mini {
-	width: 16px;
-	line-height: 20px;
-}
-
-/*
-@keyframes rotation {
-	to   {transform: rotate(1turn);}
-}
-
-.icon-spinner {
-    width: 16px;
-    height: 16px;
-
-	&:before {
-		transform-origin: 8px 8px;
-		margin-top: 1px;
-		display: inline-block;
-		font-size: 16px;
-		line-height: 100%;
-	}
-}
-*/
-
 @keyframes rotation {
 	to   {transform: rotate(1turn);}
 }
@@ -136,10 +90,6 @@
 
 	font-family: Arial;
 
-	&:before {
-		content: "";
-	}
-
 	height: 11px;
 	width: 11px;
 
@@ -150,15 +100,6 @@
 	border-top-color: #333;
 	border-radius: 100%;
 
-	animation: none;
-
-	&.animated {
-		border-color: transparent;
-		border-top-color: #999;
-
-		animation: rotation .8s infinite ease-in-out;
-	}
-
 	&.big {
 
 		height: 13px;
@@ -179,3 +120,14 @@
 		}
 	}
 }
+
+.icon-spinner:not(.not-animated) {
+	border-color: transparent;
+	border-top-color: #999;
+	animation: rotation .8s infinite ease-in-out;
+}
+
+.fontastic.icon-spinner {
+    text-indent: -1em;
+    overflow: hidden;
+}