Remove some CSS outline and !important

dev/Styles/Admin.less

@@ -29,7 +29,6 @@
 	.e-item {
 		overflow: hidden;
 		text-decoration: none;
-		outline: 0;
 	}
 
 	.e-link {
@@ -47,7 +46,6 @@
 
 		padding: 4px 10px;
 
-		outline: 0;
 		text-decoration: none;
 	}
 

dev/Styles/Components.less

@@ -57,7 +57,6 @@
 		&.disabled {
 			cursor: not-allowed;
 			opacity: 0.5;
-			outline: 0;
 		}
 	}
 

dev/Styles/EmailAddresses.less

@@ -49,7 +49,6 @@
 .emailaddresses li a {
 	font-size: 12px;
 	color: #999;
-	outline: 0;
 	padding: 1px;
 	position: absolute;
 	right: 2px;
@@ -73,7 +72,6 @@
 	height: auto;
 	line-height: inherit;
 	margin: 0;
-	outline: 0;
 	padding: 0;
 	vertical-align: baseline;
 }

dev/Styles/FolderList.less

@@ -112,7 +112,6 @@
 			padding-left: @folderItemPadding;
 			padding-right: @folderItemPadding;
 
-			outline: 0;
 			text-decoration: none;
 
 			&.selectable {

dev/Styles/Login.less

@@ -11,38 +11,47 @@
 	}
 }
 
-@glass-color: #fff !important;
+@glass-color: #fff;
-@glass-error-color: #f76260 !important;
+@glass-error-color: #f76260;
-@glass-m-color: rgba(255, 255, 255, .8) !important;
+@glass-m-color: rgba(255, 255, 255, .8);
 
 .b-login-content {
 
 	.loginFormWrapper {
 		position: relative;
+	}
 
 	.descWrapper {
+		color: var(--loading-color, #000);
+		font-size: 30px;
 		margin-bottom: 10px;
 		text-align: center;
-
-			.desc {
-				font-size: 30px;
-				color: var(--loading-color, #000);
 		text-shadow: var(--loading-text-shadow);
 	}
-		}
 
 	.loginForm {
 		background-color: var(--login-bg-color, rgba(0, 0, 0, .5));
 		border: var(--login-border, 1px solid rgba(255, 255, 255, .2));
 		border-radius: var(--login-border-radius, 7px);
 		box-shadow: var(--login-box-shadow);
+		color: var(--login-color, @glass-m-color);
 		margin: 0;
+
+		* {
+			color: var(--login-color, @glass-m-color);
 		}
 
-		.input-append .add-on *,
+		.controls.error {
-		.loginForm, .legend, .e-checkbox-icon, .g-ui-link, .language-button {
+			.input-append .add-on,
-			color: var(--login-color, @glass-m-color);
+			.input-append .add-on * {
-			text-shadow: none !important;
+				color: @glass-error-color;
+			}
+
+			input {
+				color: @glass-error-color;
+				border-color: @glass-error-color;
+			}
+		}
 	}
 
 	.controls, .control-group {
@@ -54,23 +63,22 @@
 	}
 
 	.controls {
-			.inputLoginForm, .inputEmail, .inputLogin, .inputPassword {
+		.inputLoginForm, .inputLogin, .inputPassword {
 			font-size: 18px;
 			height: 40px;
 			line-height: 20px;
 			padding-left: 12px;
 			padding-right: 12px;
 		}
-			.inputEmail, .inputLogin, .inputPassword {
+		.inputLogin, .inputPassword {
 			padding-right: 35px;
 		}
 
 		input, .btn {
-				border: 1px solid none !important;
+			border: 1px solid none;
 			background: none !important;
-				outline: none !important;
+			text-shadow: none;
-				text-shadow: none !important;
+			box-shadow: none;
-				box-shadow: none !important;
 
 			color: @glass-color;
 			border-color: @glass-m-color;
@@ -80,7 +88,7 @@
 
 			&:placeholder {
 				color: @glass-color;
-					text-shadow: none !important;
+				text-shadow: none;
 			}
 
 			&:focus, &:hover {
@@ -97,17 +105,6 @@
 				border-color: @glass-color;
 			}
 		}
-
-			&.error {
-				.input-append .add-on * {
-					color: @glass-error-color;
-				}
-
-				input {
-					color: @glass-error-color;
-					border-color: @glass-error-color;
-				}
-			}
 	}
 
 	.signMeLabel .e-checkbox {
@@ -116,10 +113,12 @@
 
 	.input-append .add-on {
 		margin-left: -1.5em;
-			position: relative;
+		position: absolute;
 		font-size: 17px;
 		line-height: 29px;
+		right: 6px;
 		top: 6px;
+		z-index: 10;
 	}
 
 	.input-append .add-on * {
@@ -127,12 +126,6 @@
 		line-height: 29px;
 	}
 
-		.controls.error .add-on *,
-		.control-group.error .add-on * {
-			color: #b94a48;
-		}
-	}
-
 	.buttonLogin {
 		margin: 0;
 	}
@@ -160,7 +153,6 @@
 
 	.language-button {
 		padding: 5px;
-		outline: none;
 		text-decoration: none;
 	}
 }
@@ -207,6 +199,5 @@
 	display: inline-block;
 	margin: 0;
 	padding: 0;
-	outline: none;
 	cursor: pointer;
 }

dev/Styles/Settings.less

@@ -39,7 +39,6 @@
 	.e-item {
 		overflow: hidden;
 		text-decoration: none;
-		outline: 0;
 	}
 
 	.e-link {
@@ -56,7 +55,6 @@
 
 		padding: 4px 10px;
 
-		outline: 0;
 		text-decoration: none;
 	}
 

dev/Styles/SquireUI.less

@@ -143,7 +143,6 @@ Secondly, we can't rely on MUA's what to do with :empty
 	border-radius: 0;
 	display: none;
 	font-family: var(--fontMono);
-	outline: none;
 	margin: 0;
 	resize: none;
 	white-space: pre-wrap;

dev/Styles/SystemDropDown.less

@@ -23,7 +23,7 @@
 
 	.email-title {
 		display: inline-block;
-		max-width: 200px;
+		max-width: 50vw;
 		text-align: left;
 		text-overflow: ellipsis;
 		overflow: hidden;
@@ -61,24 +61,19 @@
 	}
 
 	.accountPlace {
-		background-color: #000;
 		background-color: rgba(0, 0, 0, 0.5);
-
+		border-radius: 4px;
 		color: #fff;
-		text-shadow: 0 1px 0 #000;
-
 		display: inline-block;
-		height: 29px;
-		max-width: 250px;
-		border-radius: 4px;
-		font-size: 16px;
-		line-height: 30px;
-		padding: 1px 8px;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		border-radius: 4px;
 		font-weight: bold;
-
+		font-size: 16px;
+		height: 29px;
+		line-height: 30px;
+		max-width: 25vw;
+		overflow: hidden;
+		padding: 1px 8px;
+		text-overflow: ellipsis;
+		text-shadow: 0 1px 0 #000;
 		white-space: nowrap;
 	}
 
@@ -107,13 +102,6 @@
 	}
 }
 
-/* mobile */
-@media screen and (max-width: 767px) {
-	.accountPlace {
-		max-width: 150px !important;
-	}
-}
-
 @keyframes firstBar {
   0%   { height: 30%; }
   50%  { height: 100%; }

dev/Styles/_End.less

@@ -17,7 +17,7 @@
 	top: 100%;
 	transition: opacity 0.2s ease-in-out;
 	white-space: nowrap;
-	z-index: 2001 !important;
+	z-index: 2001;
 }
 @media only screen and (max-width: 600px) {
 	[data-rainloopErrorTip]::before {

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

@@ -4,7 +4,6 @@
 			<button type="button" class="close" data-bind="click: function () { submitError('') }">×</button>
 			<span data-bind="text: submitError"></span>
 		</div>
-		<div class="wrapper-parent">
 		<form class="wrapper submitting-pane loginForm" action="#/" data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
 			<div class="controls" data-bind="css: {'error': loginError}">
 				<div class="input-append">
@@ -36,5 +35,4 @@
 			</div>
 		</form>
 	</div>
-	</div>
 <div>

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

@@ -1,19 +1,16 @@
 <div class="b-login-content">
 	<div class="loginFormWrapper" data-bind="css: {'afterLoginHide': formHidden}">
-		<div class="descWrapper" data-bind="visible: '' !== loadingDesc">
+		<div class="descWrapper" data-bind="visible: '' !== loadingDesc, text: loadingDesc"></div>
-			<span class="desc" data-bind="text: loadingDesc"></span>
-		</div>
 		<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 class="wrapper-parent">
 		<form class="wrapper submitting-pane loginForm" action="#/"
 			data-bind="submit: submitForm, css: {'errorAnimated': formError, 'submitting': submitRequest()}">
 			<div class="controls" data-bind="css: {'error': emailError}">
 				<div class="input-append">
-						<input required="" type="text" class="input-block-level inputEmail" pattern="[^@\s]+(@[^\s]+)?" inputmode="email"
+					<input required="" type="text" class="input-block-level inputLogin" pattern="[^@\s]+(@[^\s]+)?" inputmode="email"
 						autofocus="" autocomplete="email" autocorrect="off" autocapitalize="off" spellcheck="false"
 						data-bind="textInput: email, disable: submitRequest"
 						data-i18n="[placeholder]GLOBAL/EMAIL" />
@@ -41,9 +38,10 @@
 			</div>
 			<div class="controls clearfix" style="margin-bottom: 10px">
 				<div class="pull-right language-buttons">
-						<a href="#" tabindex="-1" class="language-button"
+					<a href="#" tabindex="-1" class="language-button fontastic"
-							data-bind="visible: allowLanguagesOnLogin, click: selectLanguage" data-i18n="[title]POPUPS_LANGUAGES/TITLE_LANGUAGES">
+						data-bind="visible: allowLanguagesOnLogin, click: selectLanguage, css: { 'icon-spinner' : langRequest }"
-							<i class="fontastic" data-bind="css: { 'icon-spinner' : langRequest }">🌍</i>
+						data-i18n="[title]POPUPS_LANGUAGES/TITLE_LANGUAGES">
+						🌍
 					</a>
 				</div>
 
@@ -74,5 +72,4 @@
 			</div>
 		</form>
 	</div>
-	</div>
 </div>

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

@@ -22,7 +22,7 @@
 					<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
 					<div class="controls">
 						<label style="margin-top: 5px;" data-bind="visible: !isNew()"><strong data-bind="text: email"></strong></label>
-						<input type="email" class="inputEmail input-xlarge"
+						<input type="email" class="input-xlarge"
 							autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 							data-bind="visible: isNew, textInput: email, onEnter: addAccountCommand" />
 					</div>

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

@@ -17,7 +17,7 @@
 				<div class="control-group" data-bind="visible: !owner(), css: {'error': emailHasError}">
 					<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
 					<div class="controls">
-						<input type="email" class="inputEmail input-xlarge" autofocus=""
+						<input type="email" class="input-xlarge" autofocus=""
 							autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 							data-bind="value: email, onEnter: addOrEditIdentityCommand, hasfocus: emailFocused" />
 					</div>

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

@@ -14,7 +14,7 @@
 				<div class="control-group" data-bind="css: {'error': emailError}">
 					<label class="control-label" data-i18n="GLOBAL/EMAIL"></label>
 					<div class="controls">
-						<input type="email" class="inputEmail input-large"
+						<input type="email" class="input-large"
 							autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
 							data-bind="value: email" />
 					</div>

vendors/bootstrap/less/button-groups.less

@@ -81,14 +81,6 @@
   z-index: 2;
 }
 
-// On active and open, don't show outline
-.btn-group .dropdown-toggle:active,
-.btn-group.open .dropdown-toggle {
-  outline: 0;
-}
-
-
-
 // Split button dropdowns
 // ----------------------
 

vendors/bootstrap/less/buttons.less

@@ -40,7 +40,6 @@
   &.active,
   &:active {
     opacity: 0.9;
-    outline: 0;
     box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
   }
 

vendors/bootstrap/less/dropdowns.less

@@ -7,10 +7,6 @@
 .dropdown {
   position: relative;
 }
-.dropdown-toggle:active,
-.open .dropdown-toggle {
-  outline: 0;
-}
 
 // Dropdown arrow/caret
 // --------------------
@@ -80,7 +76,6 @@
 .dropdown-menu .active > a:hover {
   color: @dropdownLinkColorHover;
   text-decoration: none;
-  outline: 0;
   background-color: @dropdownLinkBackgroundActive;
 }
 

vendors/bootstrap/less/forms.less

@@ -65,7 +65,7 @@ textarea {
 // Shared size and type resets
 select,
 textarea,
-input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
+input {
   box-sizing: border-box;
   display: inline-block;
   height: @baseLineHeight + 10;
@@ -87,7 +87,7 @@ textarea {
 }
 // Everything else
 textarea,
-input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
+input {
   background-color: @inputBackground;
   border: 1px solid @inputBorder;
   box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
@@ -98,7 +98,6 @@ input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]) {
     background-color: #fff;
     border-color: darken(@inputBorder, 20%);
     box-shadow: none;
-    outline: 0;
   }
 }
 
@@ -199,21 +198,6 @@ input[type="checkbox"][readonly] {
   .formFieldState(@errorText, @errorText, @errorBackground);
 }
 
-// HTML5 invalid states
-// Shares styles with the .control-group.error above
-input:focus:required:invalid,
-textarea:focus:required:invalid,
-select:focus:required:invalid {
-  color: #b94a48;
-  border-color: #ee5f5b;
-  &:focus {
-    border-color: darken(#ee5f5b, 10%);
-    box-shadow: 0 0 6px lighten(#ee5f5b, 20%);
-  }
-}
-
-
-
 // INPUT GROUPS
 // ------------
 
@@ -222,28 +206,20 @@ select:focus:required:invalid {
   margin-bottom: 5px;
   font-size: 0;
   white-space: nowrap; // Prevent span and input from separating
+  position: relative;
 
   input,
   select {
-    position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
     margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
     font-size: @baseFontSize;
     vertical-align: top;
     border-radius: @inputBorderRadius;
-    // Make input on top when focused so blue border and shadow always show
-    &:focus {
-      z-index: 2;
-    }
   }
   .btn {
     margin-left: -1px;
     vertical-align: top;
     border-radius: 0;
   }
-  .active {
-    background-color: lighten(@green, 30);
-    border-color: @green;
-  }
   .btn:last-child {
     border-radius: 0 @inputBorderRadius @inputBorderRadius 0;
   }