diff options
| author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2019-01-25 12:00:16 +0100 |
|---|---|---|
| committer | Roeland Jago Douma <roeland@famdouma.nl> | 2019-02-22 12:54:28 +0100 |
| commit | d1ba0d52abc434d7a444068319ffa9b115d03eb8 (patch) | |
| tree | 30de5024f06aeb99e00d4672b1c40e29fcb09866 /core | |
| parent | 7c68e0eae7d378d73aa05361efbba835890c45c2 (diff) | |
| download | nextcloud-server-d1ba0d52abc434d7a444068319ffa9b115d03eb8.tar.gz nextcloud-server-d1ba0d52abc434d7a444068319ffa9b115d03eb8.zip | |
Keyboard focus and mouse hover feedback for 'Show password' toggle
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'core')
| -rw-r--r-- | core/css/guest.css | 8 | ||||
| -rw-r--r-- | core/css/styles.scss | 20 | ||||
| -rw-r--r-- | core/templates/installation.php | 4 |
3 files changed, 21 insertions, 11 deletions
diff --git a/core/css/guest.css b/core/css/guest.css index dc9a82bda69..39d76c5676c 100644 --- a/core/css/guest.css +++ b/core/css/guest.css @@ -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; diff --git a/core/css/styles.scss b/core/css/styles.scss index 11c737af52f..efd18bf2e52 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -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; } diff --git a/core/templates/installation.php b/core/templates/installation.php index 3fdde8da1c2..3a6fd283e0b 100644 --- a/core/templates/installation.php +++ b/core/templates/installation.php @@ -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"> |