adjust labels and input field groups

This commit is contained in:
Jan-Christoph Borchardt 2013-07-23 15:47:07 +02:00
parent 93b227d803
commit dc82e29949
3 changed files with 64 additions and 39 deletions

View File

@ -167,21 +167,35 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
#rightcontent, .rightcontent { position:fixed; top:6.4em; left:24.5em; overflow:auto }
/* LOG IN & INSTALLATION ------------------------------------------------------------ */
/* Some whitespace to the top */
#body-login #header {
padding-top: 100px;
}
/* Dark subtle label text */
#body-login p.info,
#body-login form fieldset legend,
#body-login #datadirContent label,
#body-login form input[type="checkbox"]+label {
text-align: center;
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: .8;
}
#body-login div.buttons { text-align:center; }
#body-login p.info {
width: 22em;
text-align: center;
margin: 0 auto;
color: #000a20;
text-shadow: #3d4d64 0 1px 0;
}
#body-login p.info a {
font-weight: bold;
color: #000d24;
}
#body-login #submit.login { margin-right:7px; } /* quick fix for log in button not being aligned with input fields, should be properly fixed by input field width later */
@ -192,12 +206,23 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
}
#body-login form #adminaccount { margin-bottom:5px; }
#body-login form fieldset legend, #datadirContent label {
width:100%; text-align:center;
font-weight:bold; color:#999; text-shadow:0 1px 0 white;
width: 100%;
font-weight: bold;
}
#body-login #datadirContent label {
display: block;
margin: 0;
}
#body-login form #datadirField legend {
margin-bottom: 15px;
}
#body-login #showAdvanced {
padding: 13px; /* increase clickable area of Advanced dropdown */
}
#body-login #showAdvanced img {
vertical-align: bottom; /* adjust position of Advanced dropdown arrow */
margin-left: -4px;
}
#body-login form fieldset legend a { color:#999; }
#body-login #datadirContent label { display:block; margin:0; color:#999; }
#body-login form #datadirField legend { margin-bottom:15px; }
/* Icons for username and password fields to better recognize them */
#adminlogin, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; }
@ -215,6 +240,10 @@ input[name="adminpass-clone"] { padding-left:1.8em; width:11.7em !important; }
border-bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
-moz-box-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.25) inset;
-webkit-box-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.25) inset;
box-shadow: 0 -1px 0 rgba(0,0,0,.5), 0 1px 0 rgba(0,0,0,.25) inset;
border: none;
}
.groupmiddle input {
margin-top: 0;
@ -222,34 +251,23 @@ input[name="adminpass-clone"] { padding-left:1.8em; width:11.7em !important; }
border-top: 0;
border-bottom: 0;
border-radius: 0;
box-shadow: 0 1px 1px #fff, 0 1px 0 #ddd inset;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.1) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.1) inset;
border: none;
}
.groupbottom input {
margin-top: 0;
border-top: 0;
border-top-right-radius: 0;
border-top-left-radius: 0;
box-shadow: 0 1px 1px #fff, 0 1px 0 #ddd inset;
}
/* Adjustments for new full-color background on log in */
#body-login .grouptop input {
-moz-box-shadow: 0 -1px 0 #3d4d65, 0 1px 0 #1d2d44 inset;
-webkit-box-shadow: 0 -1px 0 #3d4d65, 0 1px 0 #1d2d44 inset;
box-shadow: 0 -1px 0 #3d4d65, 0 1px 0 #1d2d44 inset;
border: 1px solid #3d4d64;
border-bottom: 0;
}
#body-login .groupbottom input {
-moz-box-shadow: 0 1px 0 #3d4d65, 0 1px 0 #ddd inset;
-webkit-box-shadow: 0 1px 0 #3d4d65, 0 1px 0 #ddd inset;
box-shadow: 0 1px 0 #3d4d65, 0 1px 0 #ddd inset;
border: 1px solid #3d4d64;
border-top: 0;
-moz-box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.1) inset;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.1) inset;
box-shadow: 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(0,0,0,.1) inset;
border: none;
}
/* In field labels. No, HTML placeholder does not work as well. */
#body-login form label { color:#666; }
#body-login .groupmiddle label, #body-login .groupbottom label { top:.65em; }
p.infield { position:relative; }
label.infield { cursor:text !important; top:1.05em; left:.85em; }
@ -263,17 +281,10 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
position: relative;
margin: 0;
font-size: 1em;
color: #000d24;
text-shadow: #3d4d64 0 1px 0;
padding: 14px;
padding-left: 28px;
margin-left: -28px;
}
#body-login form input[type="checkbox"]+label:hover,
#body-login form input[type="checkbox"]+label:focus {
color: #000 !important;
text-shadow: #3d4d64 0 1px 0;
}
#body-login form .errors { background:#fed7d7; border:1px solid #f00; list-style-indent:inside; margin:0 0 2em; padding:1em; }
#body-login .success { background:#d7fed7; border:1px solid #0f0; width: 35%; margin: 30px auto; padding:1em; text-align: center;}
@ -359,6 +370,12 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
margin: 0 7px 5px;
font-weight: bold;
}
#body-login .warning legend {
text-shadow: none;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
#body-login a.warning {
cursor: pointer;
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 229 B

After

Width:  |  Height:  |  Size: 304 B

View File

@ -1,5 +1,13 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="10" width="10" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
<path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none" d="m1 2 4 8 4-7.989z" fill="#fff"/>
<path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none" d="m1 1 4 8 4-7.989z" fill="#999"/>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
<metadata>
<rdf:RDF>
<cc:Work rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:title/>
</cc:Work>
</rdf:RDF>
</metadata>
<path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none;" d="m4,5,4,7,4-6.989z" fill-opacity="0.19607843" fill="#FFF"/>
<path style="block-progression:tb;text-indent:0;color:#000000;text-transform:none;" fill="#000" d="m4,4,4,7,4-6.989z"/>
</svg>

Before

Width:  |  Height:  |  Size: 565 B

After

Width:  |  Height:  |  Size: 711 B