Show Hide password eye icon into Password fields

Hi Mel,
1A - 1B - 1C - I confirm you are working - I'm sending you by PM all CSS details
1D - Thanks

BUG - eye and eye-slash have two different width, so, switching from eye to eye-slash is moving the question mark - Please, can you help on solving it ? (Check it on my live site I gave you by PM)

2 - I confirm you is working - again, I'm sending you by PM some CSS details

Hi Mel,
thanks for suggestion. Tested, but I really don't like very much the "eye icon" dimension changing.

Please, Is there a way to have the "question mark icon" position dependent from the "password field" position instead of the "eye icon" position ?

Hi Mel,
PHP 7.3.20 + Joomla 3.9.20 + Helix Ultimate 1.1.2 (it is running Font Awesome 5) + I uploaded to last SCLogin 8.4.5 - You can see it on my live site into the offcanvas position where I changed the ...modules/mod_sclogin/helper.php line 555 "fa fas fa-question-circle" with "fas fa-question" question mark icon because I find it more consistency with mobile views and for all templates needs. Please:

1 - Which of my CSS suggestions have been included into last 8.4.5 release and which not ?

.sclogin .field-icon {
font-size: 1rem; # 1D as I wrote you is really too better to have the "font-size" (at least) expressed as rem and not px, I'm not having back issues #
}
span#sc-eye-sclogin-passwd99 {
vertical-align: text-bottom; # To have back the two eye icons vertically aligned #
}
.sclogin-passwd {
float:left; # You suggested to have the question mark icon aligned on the right of the password field #
}
.sclogin-joomla-login.vertical a.forgot.btn {
width: auto !important; # I had to add this to override a "13%" value that you added, that from my point of view should be deprecated #
}
a.forgot.btn i {
margin-top: 0px; # I had to add this to override a "6px" value that you added, that from my point of view should be deprecated #
vertical-align: middle; # To have back the question icon vertically aligned that solve the margin-top need. There is a "a.forgot.btn {height: 28px !important;}" setting that in my opinion should be deprecated > The "fas fa-question" question mark seems to has a space on its top that do not permit it to be really vertically centered well. Please, Do you have sggestions ? #
font-size: 1.2rem; # Again, as I wrote you is really too better to have the "font-size" expressed as rem and not px, I'm not having back issues #
}


2 - to fix the question mark icon movement when switching by clicking on eye / eye-slash icons I have to change this CSS code:

.sclogin .field-icon {
margin-left: -25px;
margin-right: 0.2rem; # insted of the 11px; you added #
position: relative;
z-index: 2;
font-size: 1rem;
width: 18px;
}

span.icon-eye.field-icon, span.fa.fa-eye.field-icon {
margin-top: 6px;
margin-left: -1.8rem; # insted of the -29px; you added #
vertical-align: text-bottom;
}

span#sc-eye-sclogin-passwd99 {
vertical-align: text-bottom;
margin-left: -1.8rem; # this is a missing by you, I added it #
}

Please, Can you confirm and teel me if you are going to add it by default or not ?

Hi Mel,

1 - Thanks, too appreciated

2 - "...However, the implementation we did in the SCLogin module works correctly in the standard Joomla template..." = On my Test2 site (you have the full access) I duplicated the SCLogin module and set it with "Advanced > Load FontAwesome CSS: Yes" to test it with Beez3 and Protostar templates.
As you can see switching we have back the same issue with Helix Ultimate / Protostar / Beez3, on all templates. As I suggested and from my point of view:
- horizontally because a span#sc-eye-sclogin-passwd99 { margin-left: -1.8rem; } setting is missing
- vertically because a span#sc-eye-sclogin-passwd99 { vertical-align: text-bottom; } setting is missing

For sure, as you now, I find more responsive and more adaptable to all your customers to always use rem instead of px, that's why I suggested more small "fixies"

: