diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx index 83c6e42..5b5f878 100644 --- a/src/login/KcPage.tsx +++ b/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: - "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", diff --git a/src/login/tailwind.css b/src/login/tailwind.css index bd8e46f..7a36ce0 100644 --- a/src/login/tailwind.css +++ b/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, - #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 {