Browse Source
Keyboard focus and mouse hover feedback for 'Show password' toggle
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
pull/14320/head
Jan-Christoph Borchardt
7 years ago
committed by
Roeland Jago Douma
No known key found for this signature in database
GPG Key ID: F941078878347C0C
4 changed files with
22 additions and
12 deletions
-
core/css/guest.css
-
core/css/styles.scss
-
core/templates/installation.php
-
settings/templates/settings/personal/security.php
|
|
|
@ -362,9 +362,6 @@ label.infield { |
|
|
|
top: .8em; |
|
|
|
float: right; |
|
|
|
} |
|
|
|
#show, #dbpassword-toggle, #personal-show { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
#show + label, #dbpassword-toggle + label { |
|
|
|
right: 21px; |
|
|
|
top: 15px !important; |
|
|
|
@ -386,6 +383,11 @@ label.infield { |
|
|
|
#show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
/* Feedback for keyboard focus and mouse hover */ |
|
|
|
#show:focus + label, #dbpassword:focus + label, #personal-show:focus + label, |
|
|
|
#show + label:hover, #dbpassword + label:hover, #personal-show + label:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
#pass2, input[name='personal-password-clone'] { |
|
|
|
padding: .6em 2.5em .4em .4em; |
|
|
|
width: 8em; |
|
|
|
|
|
|
|
@ -271,10 +271,6 @@ label.infield { |
|
|
|
float: right; |
|
|
|
} |
|
|
|
|
|
|
|
#show, #dbpassword, #personal-show { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
|
|
|
|
#show + label, #dbpassword + label { |
|
|
|
right: 21px; |
|
|
|
top: 15px !important; |
|
|
|
@ -296,6 +292,18 @@ label.infield { |
|
|
|
opacity: .3; |
|
|
|
} |
|
|
|
|
|
|
|
/* Feedback for keyboard focus and mouse hover */ |
|
|
|
#show, |
|
|
|
#dbpassword, |
|
|
|
#personal-show { |
|
|
|
&:focus + label { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
+ label:hover { |
|
|
|
opacity: 1; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
#show + label:before, #dbpassword + label:before, #personal-show + label:before { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
@ -312,8 +320,8 @@ label.infield { |
|
|
|
#personal-show + label { |
|
|
|
display: block; |
|
|
|
right: 0; |
|
|
|
margin-top: -41px; |
|
|
|
margin-right: -6px; |
|
|
|
margin-top: -43px; |
|
|
|
margin-right: -4px; |
|
|
|
padding: 22px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -50,7 +50,7 @@ script('core', [ |
|
|
|
value="<?php p($_['adminpass']); ?>" |
|
|
|
autocomplete="off" autocapitalize="none" autocorrect="off" required> |
|
|
|
<label for="adminpass" class="infield"><?php p($l->t( 'Password' )); ?></label>
|
|
|
|
<input type="checkbox" id="show" name="show"> |
|
|
|
<input type="checkbox" id="show" class="hidden-visually" name="show"> |
|
|
|
<label for="show"></label> |
|
|
|
</p> |
|
|
|
</fieldset> |
|
|
|
@ -113,7 +113,7 @@ script('core', [ |
|
|
|
value="<?php p($_['dbpass']); ?>" |
|
|
|
autocomplete="off" autocapitalize="none" autocorrect="off"> |
|
|
|
<label for="dbpass" class="infield"><?php p($l->t( 'Database password' )); ?></label>
|
|
|
|
<input type="checkbox" id="dbpassword-toggle" name="dbpassword-toggle"> |
|
|
|
<input type="checkbox" id="dbpassword-toggle" class="hidden-visually" name="dbpassword-toggle"> |
|
|
|
<label for="dbpassword-toggle"></label> |
|
|
|
</p> |
|
|
|
<p class="groupmiddle"> |
|
|
|
|
|
|
|
@ -52,7 +52,7 @@ if($_['passwordChangeSupported']) { |
|
|
|
placeholder="<?php p($l->t('New password')); ?>" |
|
|
|
data-typetoggle="#personal-show" |
|
|
|
autocomplete="off" autocapitalize="none" autocorrect="off" /> |
|
|
|
<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label> |
|
|
|
<input type="checkbox" id="personal-show" class="hidden-visually" name="show" /><label for="personal-show" class="personal-show-label"></label> |
|
|
|
</div> |
|
|
|
|
|
|
|
<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" /> |
|
|
|
|
