diff --git a/frontend/index.html b/frontend/index.html index 582cb44..cfc5ecf 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -144,7 +144,18 @@ - + diff --git a/frontend/src/main.ts b/frontend/src/main.ts index e515a9d..86dab5f 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -312,7 +312,7 @@ const ui = { function updateRevealPasswordButton(): void { const revealed = ui.password.type === 'text'; - ui.revealPassword.textContent = revealed ? bilingual('隐藏', 'Hide') : bilingual('显示', 'Show'); + ui.revealPassword.setAttribute('aria-pressed', revealed ? 'true' : 'false'); ui.revealPassword.setAttribute('aria-label', revealed ? bilingual('隐藏密码', 'Hide password') : bilingual('显示密码', 'Show password')); diff --git a/frontend/src/style.css b/frontend/src/style.css index 9869068..6e2721d 100644 --- a/frontend/src/style.css +++ b/frontend/src/style.css @@ -715,7 +715,7 @@ button:disabled { } .input-action-wrap input { - padding-right: 82px; + padding-right: 44px; } .input-action { @@ -723,6 +723,9 @@ button:disabled { top: 5px; right: 5px; bottom: 5px; + display: grid; + width: 34px; + place-items: center; border: 0; border-radius: 5px; background: var(--surface-2); @@ -732,6 +735,32 @@ button:disabled { text-transform: uppercase; } +.input-action:hover { + color: var(--text); +} + +.reveal-icon { + width: 16px; + height: 16px; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 1.8; +} + +.reveal-icon-eye-off { + display: none; +} + +.input-action[aria-pressed='true'] .reveal-icon-eye { + display: none; +} + +.input-action[aria-pressed='true'] .reveal-icon-eye-off { + display: block; +} + .key-field { display: grid; gap: 9px;