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;