fix: hide password button is now visible

src/login/KcPage.tsx

@@ -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:
+    kcHeaderClass: "mb-6 text-center glass-text-stable",
-        "mb-6 text-center text-[0.93rem] tracking-[0.01em] text-foreground/90 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: "",
+    kcSelectAuthListItemArrowClass: "shrink-0 ml-auto",
-    kcSelectAuthListItemArrowIconClass: "flex-1 min-w-0 flex flex-col gap-0.5",
+    kcSelectAuthListItemArrowIconClass: "",
-    kcSelectAuthListItemBodyClass: "",
+    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

@@ -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,
+    #cancel-aia {
-    #try-another-way {
         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 {