first step of infield label removal, fix login screen
This commit is contained in:
parent
a5dd8e84f1
commit
7177d3a496
3 changed files with 25 additions and 31 deletions
|
@ -464,19 +464,19 @@ input[name='password-clone'] {
|
|||
width: 223px !important;
|
||||
padding-left: 36px !important;
|
||||
}
|
||||
#adminlogin+label+img,
|
||||
#adminlogin~img,
|
||||
#adminpass-icon,
|
||||
#user+label+img,
|
||||
#user~img,
|
||||
#password-icon {
|
||||
position: absolute;
|
||||
left: 1.25em;
|
||||
top: 1.65em;
|
||||
left: 16px;
|
||||
top: 24px;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
|
||||
filter: alpha(opacity=30);
|
||||
opacity: .3;
|
||||
}
|
||||
#adminpass-icon, #password-icon {
|
||||
top: 1.1em;
|
||||
top: 18px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
|
|
|
@ -26,19 +26,21 @@
|
|||
<!-- the following div ensures that the spinner is always inside the #message div -->
|
||||
<div style="clear: both;"></div>
|
||||
</p>
|
||||
<p class="infield grouptop">
|
||||
<input type="text" name="user" id="user" placeholder=""
|
||||
value="<?php p($_['username']); ?>"
|
||||
<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
|
||||
autocomplete="on" autocapitalize="off" autocorrect="off" required />
|
||||
<p class="grouptop">
|
||||
<input type="text" name="user" id="user"
|
||||
placeholder="<?php p($l->t('Username')); ?>"
|
||||
value="<?php p($_['username']); ?>"
|
||||
<?php p($_['user_autofocus'] ? 'autofocus' : ''); ?>
|
||||
autocomplete="on" autocapitalize="off" autocorrect="off" required />
|
||||
<label for="user" class="infield"><?php p($l->t('Username')); ?></label>
|
||||
<img class="svg" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
|
||||
</p>
|
||||
|
||||
<p class="infield groupbottom">
|
||||
<input type="password" name="password" id="password" value="" placeholder=""
|
||||
<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
|
||||
autocomplete="on" autocapitalize="off" autocorrect="off" required />
|
||||
<p class="groupbottom">
|
||||
<input type="password" name="password" id="password" value=""
|
||||
placeholder="<?php p($l->t('Password')); ?>"
|
||||
<?php p($_['user_autofocus'] ? '' : 'autofocus'); ?>
|
||||
autocomplete="on" autocapitalize="off" autocorrect="off" required />
|
||||
<label for="password" class="infield"><?php p($l->t('Password')); ?></label>
|
||||
<img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
|
||||
</p>
|
||||
|
|
|
@ -320,7 +320,6 @@ class OC {
|
|||
OC_Util::addScript("jquery-migrate-1.2.1.min");
|
||||
OC_Util::addScript("jquery-ui-1.10.0.custom");
|
||||
OC_Util::addScript("jquery-showpassword");
|
||||
OC_Util::addScript("jquery.infieldlabel");
|
||||
OC_Util::addScript("jquery.placeholder");
|
||||
OC_Util::addScript("jquery-tipsy");
|
||||
OC_Util::addScript("compatibility");
|
||||
|
|
Loading…
Reference in a new issue