Zeusina/zeusina-keycloak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide password button is now visible

Browse Source
This commit is contained in:
Zeusina
2026-07-01 19:44:55 +00:00
parent cd7211e367
commit d17e1865ba
2 changed files with 154 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/login/KcPage.tsx
+7 -7
View File
@@ -103,8 +103,7 @@ const classes = {
"relative z-[1] min-h-screen flex flex-col items-center justify-center px-4 pb-8 sm:px-[18px] mac-slide-up",
kcHeaderWrapperClass: "max-w-[600px] mx-auto",
kcHeaderClass:
"mb-6 text-center text-[0.93rem] tracking-[0.01em] text-foreground/90 glass-text-stable",
kcHeaderClass: "mb-6 text-center glass-text-stable",
kcFormCardClass:
"glass relative w-full sm:w-[460px] rounded-xl px-4 py-5 sm:px-7 sm:py-[30px]",
@@ -161,13 +160,14 @@ const classes = {
kcSelectAuthListItemIconClass:
"shrink-0 w-10 h-10 rounded-full grid place-items-center bg-muted text-foreground",
kcSelectAuthListItemIconPropertyClass: "",
kcSelectAuthListItemArrowClass: "",
kcSelectAuthListItemArrowIconClass: "flex-1 min-w-0 flex flex-col gap-0.5",
kcSelectAuthListItemBodyClass: "",
kcSelectAuthListItemArrowClass: "shrink-0 ml-auto",
kcSelectAuthListItemArrowIconClass: "",
kcSelectAuthListItemBodyClass:
"flex-1 min-w-0 flex flex-col items-center gap-0.5 text-center",
kcSelectAuthListItemHeadingClass:
"text-[0.96rem] font-semibold text-foreground leading-tight",
"text-[0.96rem] font-semibold text-foreground leading-tight text-center",
kcSelectAuthListItemDescriptionClass:
"text-[0.82rem] font-medium text-muted-foreground leading-snug flex flex-wrap gap-1",
"text-[0.82rem] font-medium text-muted-foreground leading-snug text-center",
kcSelectAuthListItemFillClass: "hidden",
kcSelectAuthListItemTitle:
"m-0 mb-1 text-[0.9rem] font-semibold text-muted-foreground",
src/login/tailwind.css
+147 -6
View File
@@ -173,8 +173,15 @@
.kcHeaderClass {
margin-bottom: 1.5rem;
text-align: center;
font-size: 0.875rem;
color: var(--color-muted-foreground);
}
#kc-header-wrapper {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.02em;
color: var(--color-foreground);
text-shadow: var(--glass-text-shadow);
}
.kcFormHeaderClass h1,
@@ -254,6 +261,77 @@
color: var(--color-destructive);
}
/* Password visibility toggle inside the input */
.kcInputGroup {
position: relative;
}
.kcInputGroup .kcInputClass,
.kcInputGroup input[type="password"],
.kcInputGroup input[type="text"] {
padding-right: 2.75rem;
}
.kcFormPasswordVisibilityButtonClass {
position: absolute;
right: 1.125rem;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
border: 0;
background: transparent;
color: var(--color-muted-foreground);
cursor: pointer;
}
.kcFormPasswordVisibilityButtonClass:hover {
color: var(--color-foreground);
}
.kcFormPasswordVisibilityButtonClass:hover .kcFormPasswordVisibilityIconShow,
.kcFormPasswordVisibilityButtonClass:hover .kcFormPasswordVisibilityIconHide {
filter: brightness(0.75);
}
.kcFormPasswordVisibilityButtonClass:focus-visible {
outline: 2px solid var(--color-ring);
outline-offset: -2px;
}
.kcFormPasswordVisibilityIconShow,
.kcFormPasswordVisibilityIconHide {
display: inline-block;
flex-shrink: 0;
width: 0.875rem;
height: 0.875rem;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.kcFormPasswordVisibilityIconShow {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzY0NzQ4YiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTIgNC41QzcgNC41IDIuNzMgNy42MSAxIDEyYzEuNzMgNC4zOSA2IDcuNSAxMSA3LjVzOS4yNy0zLjExIDExLTcuNUMyMS4yNyA3LjYxIDE3IDQuNSAxMiA0LjV6TTEyIDE3Yy0yLjc2IDAtNS0yLjI0LTUtNXMyLjI0LTUgNS01IDUgMi4yNCA1IDUtMi4yNCA1LTUgNXoiLz48L3N2Zz4=");
}
.kcFormPasswordVisibilityIconHide {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzY0NzQ4YiI+PHBhdGggZD0iTTEyIDdjMi43NiAwIDUgMi4yNCA1IDUgMCAuNjUtLjEzIDEuMjYtLjM2IDEuODNsMi45MiAyLjkyYzEuNTEtMS4yNiAyLjctMi44OSAzLjQzLTQuNzUtMS43My00LjM5LTYtNy41LTExLTcuNS0xLjQgMC0yLjc0LjI1LTMuOTguN2wyLjE3IDIuMTdDMTAuNzQgNy4xMyAxMS4zNSA3IDEyIDd6TTIgNC4yN2wyLjI4IDIuMjguNDYuNDZDMy4wOCA4LjMgMS43OCAxMC4wMiAxIDEyYzEuNzMgNC4zOSA2IDcuNSAxMSA3LjUgMS41NSAwIDMuMDMtLjMgNC4zOC0uODRsLjQyLjQyTDE5LjczIDIyIDIxIDIwLjczIDMuMjcgMyAyIDQuMjd6TTcuNTMgOS44bDEuNTUgMS41NWMtLjA1LjIxLS4wOC40My0uMDguNjUgMCAxLjY2IDEuMzQgMyAzIDMgLjIyIDAgLjQ0LS4wMy42NS0uMDhsMS41NSAxLjU1Yy0uNjcuMzMtMS40MS41My0yLjIuNTMtMi43NiAwLTUtMi4yNC01LTUgMC0uNzkuMi0xLjUzLjUzLTIuMnptNC4zMS0uNzhsMy4xNSAzLjE1LjAyLS4xNmMwLTEuNjYtMS4zNC0zLTMtM2wtLjE3LjAxeiIvPjwvc3ZnPg==");
}
@media (prefers-color-scheme: dark) {
.kcFormPasswordVisibilityIconShow {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzk0YTNiOCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTIgNC41QzcgNC41IDIuNzMgNy42MSAxIDEyYzEuNzMgNC4zOSA2IDcuNSAxMSA3LjVzOS4yNy0zLjExIDExLTcuNUMyMS4yNyA3LjYxIDE3IDQuNSAxMiA0LjV6TTEyIDE3Yy0yLjc2IDAtNS0yLjI0LTUtNXMyLjI0LTUgNS01IDUgMi4yNCA1IDUtMi4yNCA1LTUgNXoiLz48L3N2Zz4=");
}
.kcFormPasswordVisibilityIconHide {
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iIzk0YTNiOCI+PHBhdGggZD0iTTEyIDdjMi43NiAwIDUgMi4yNCA1IDUgMCAuNjUtLjEzIDEuMjYtLjM2IDEuODNsMi45MiAyLjkyYzEuNTEtMS4yNiAyLjctMi44OSAzLjQzLTQuNzUtMS43My00LjM5LTYtNy41LTExLTcuNS0xLjQgMC0yLjc0LjI1LTMuOTguN2wyLjE3IDIuMTdDMTAuNzQgNy4xMyAxMS4zNSA3IDEyIDd6TTIgNC4yN2wyLjI4IDIuMjguNDYuNDZDMy4wOCA4LjMgMS43OCAxMC4wMiAxIDEyYzEuNzMgNC4zOSA2IDcuNSAxMSA3LjUgMS41NSAwIDMuMDMtLjMgNC4zOC0uODRsLjQyLjQyTDE5LjczIDIyIDIxIDIwLjczIDMuMjcgMyAyIDQuMjd6TTcuNTMgOS44bDEuNTUgMS41NWMtLjA1LjIxLS4wOC40My0uMDguNjUgMCAxLjY2IDEuMzQgMyAzIDMgLjIyIDAgLjQ0LS4wMy42NS0uMDhsMS41NSAxLjU1Yy0uNjcuMzMtMS40MS41My0yLjIuNTMtMi43NiAwLTUtMi4yNC01LTUgMC0uNzkuMi0xLjUzLjUzLTIuMnptNC4zMS0uNzhsMy4xNSAzLjE1LjAyLS4xNmMwLTEuNjYtMS4zNC0zLTMtM2wtLjE3LjAxeiIvPjwvc3ZnPg==");
}
}
.kcButtonClass,
button,
input[type="submit"],
@@ -299,8 +377,7 @@
.kcButtonDefaultClass,
.kcButtonSecondaryClass,
#cancel-aia,
#try-another-way {
#cancel-aia {
background: var(--color-secondary);
color: var(--color-secondary-foreground);
border-color: var(--color-border);
@@ -308,9 +385,37 @@
.kcButtonDefaultClass:hover,
.kcButtonSecondaryClass:hover,
#cancel-aia:hover,
#cancel-aia:hover {
background: color-mix(in oklab, var(--color-secondary) 90%, transparent);
}
#try-another-way {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
min-height: 2.5rem;
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
text-decoration: none;
background: var(--color-secondary);
color: var(--color-secondary-foreground);
cursor: pointer;
transition:
color 150ms ease,
background-color 150ms ease,
border-color 150ms ease,
box-shadow 150ms ease;
}
#try-another-way:hover {
background: color-mix(in oklab, var(--color-secondary) 90%, transparent);
text-decoration: none;
}
#kc-form-buttons {
@@ -330,6 +435,17 @@
padding-top: 0.75rem;
}
#kc-form-options .checkbox {
margin: 0;
}
#kc-form-options .checkbox label {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.kcFormOptionsClass,
#kc-info {
border-top: 1px solid var(--color-border);
@@ -415,6 +531,17 @@
box-shadow 150ms ease;
}
#kc-registration a,
.kcFormOptionsWrapperClass a {
font-weight: 600;
color: var(--color-primary);
}
#kc-registration a:hover,
.kcFormOptionsWrapperClass a:hover {
text-decoration: underline;
}
#kc-current-locale-link::after {
content: "";
width: 0.4rem;
@@ -982,7 +1109,21 @@
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FC3F1D%22%20d%3D%22M16.376%2012.644L21%202h-3.842l-4.624%2010.644h3.842zM13.915%2024v-3.733c0-2.822-.352-3.64-1.407-5.988L6.933%202H3l7.124%2015.709V24h3.79z%22%2F%3E%3C%2Fsvg%3E");
}
/* Yandex icon is rendered by .kcCommonLogoIdP::before above; no extra pseudo-element needed. */
#social-yandex .kcCommonLogoIdP {
display: none;
}
#social-yandex.kcFormSocialAccountListButtonClass::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 18px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23FC3F1D%22%20d%3D%22M16.376%2012.644L21%202h-3.842l-4.624%2010.644h3.842zM13.915%2024v-3.733c0-2.822-.352-3.64-1.407-5.988L6.933%202H3l7.124%2015.709V24h3.79z%22%2F%3E%3C%2Fsvg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
#social-vk .kcCommonLogoIdP::before,
#social-vkontakte .kcCommonLogoIdP::before {