Merge pull request #8468 from owncloud/remove-infieldlabels

Remove infieldlabels

2 files changed, 17 insertions, 27 deletions

diff --git a/core/css/fixes.css b/core/css/fixes.css
index 0f18f0a56cd..fc122b1eff1 100644
--- a/core/css/fixes.css
+++ b/core/css/fixes.css
@@ -42,10 +42,6 @@ select {
 	border-bottom: 1px solid lightgrey;
 	background-color: white; /* don't change background on hover */
 }
-.lte9 #body-login form label.infield {
-	background-color: white; /* don't change background on hover */
-	-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='white')";
-}
 
 /* disable opacity of info text on gradient
    since we cannot set a good backround color to use the filter&background hack as with the input labels */
diff --git a/core/css/styles.css b/core/css/styles.css
index a9ffd83629b..bd688f0ada5 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -469,14 +469,14 @@ input[name='password-clone'] {
 #user+label+img,
 #password-icon {
 	position: absolute;
-	left: 1.25em;
-	top: 1.65em;
+	left: 16px;
+	top: 20px;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
 	filter: alpha(opacity=30);
 	opacity: .3;
 }
 #adminpass-icon, #password-icon {
-	top: 1.1em;
+	top: 15px;
 }
 
 /* General new input field look */
@@ -489,6 +489,11 @@ input[name='password-clone'] {
 }
 
 /* Nicely grouping input field sets */
+.grouptop,
+.groupmiddle,
+.groupbottom {
+	position: relative;
+}
 #body-login .grouptop input {
 	margin-bottom: 0;
 	border-bottom: 0;
@@ -511,23 +516,11 @@ input[name='password-clone'] {
 	box-shadow: 0 1px 0 rgba(0,0,0,.1) inset !important;
 }
 
-/* In field labels. No, HTML placeholder does not work as well. */
-#body-login .groupmiddle label, #body-login .groupbottom label { top:.65em; }
-p.infield { position:relative; }
-label.infield { cursor:text !important; top:1.05em; left:.85em; }
-#body-login form label.infield { /* labels are ellipsized when too long, keep them short */
-	position: absolute;
-	width: 82%;
-	margin-left: 26px;
-	font-size: 19px;
-	color: #aaa;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-#body-login #databaseField .infield {
-	margin-left: 0;
+/* keep the labels for screen readers but hide them since we use placeholders */
+label.infield {
+	display: none;
 }
+
 #body-login form input[type="checkbox"]+label {
 	position: relative;
 	margin: 0;
@@ -585,7 +578,7 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
 }
 #show + label, #dbpassword + label, #personal-show + label {
 	position: absolute !important;
-	height: 14px;
+	height: 20px;
 	width: 24px;
 	background-image: url("../img/actions/toggle.png");
 	background-repeat: no-repeat;
@@ -599,8 +592,9 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
 	width: 8em;
 }
 #personal-show + label {
-	margin-top: 1em;
-	margin-left: -3em;
+	height: 14px;
+	margin-top: 14px;
+	margin-left: -36px;
 }
 #passwordbutton {
 	margin-left: .5em;
@@ -685,7 +679,7 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
 #body-login input {
 	font-size: 20px;
 	margin: 5px;
-	padding: 12px 10px 8px;
+	padding: 11px 10px 9px;
 }
 #body-login input[type="text"],
 #body-login input[type="password"] {