File size: 1,697 Bytes
ed79486 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
:root { --eye-size:28px; --eye-gap:10px; }
/* Base button: neutral by default; variants handle positioning */
.eye-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--eye-size);
height: var(--eye-size);
border-radius:6px;
border: none;
cursor: pointer;
color: inherit;
z-index:3; /* above input */
padding:0;
line-height:1;
}
.eye-toggle i { font-size:0.95rem; pointer-events:none; }
.eye-toggle:focus { outline:2px solid rgba(29,233,182,0.12); outline-offset:2px; }
/* Visual variants */
.eye-toggle.variant-signin { background: rgba(255,255,255,0.06); color:#23395d; }
.eye-toggle.variant-signup { background: rgba(0,0,0,0.04); color:#23395d; }
/* Reserve input right padding when a toggle is present */
.form-field.has-eye input,
.signin-field.has-eye input { padding-right: calc(var(--eye-size) + var(--eye-gap) +6px); }
/* Fallback when markup doesn't add .has-eye */
.form-field:has(.eye-toggle) input,
.signin-field:has(.eye-toggle) input { padding-right: calc(var(--eye-size) + var(--eye-gap) +6px); }
/* Small screens */
@media (max-width:700px) {
:root { --eye-size:24px; --eye-gap:8px; }
.eye-toggle { width: var(--eye-size); height: var(--eye-size); }
}
/* Separate positioning by context to avoid cross-page impact */
/* Sign-in page context: position absolutely inside field */
:host-context(.signin-popup) .eye-toggle.variant-signin {
position: absolute;
right:10px;
top:50%;
transform: translateY(-50%);
}
/* Sign-up page context (if used similarly), keep independent positioning */
:host-context(.signup-popup) .eye-toggle.variant-signup {
position: absolute;
right:10px;
top:50%;
transform: translateY(-50%);
}
|