From 1a928923c4184e1b43cbe938f90076643ef1ba5e Mon Sep 17 00:00:00 2001 From: Zeusina Date: Wed, 1 Jul 2026 18:08:20 +0000 Subject: [PATCH] feat: use shadcn default styles --- src/login/KcPage.tsx | 27 +- src/login/Template.tsx | 9 +- src/login/pages/QrLoginCanceled.tsx | 2 +- src/login/pages/QrLoginSuccess.tsx | 2 +- src/login/pages/QrLoginVerify.tsx | 2 +- src/login/tailwind.css | 1374 +++++++++++---------------- 6 files changed, 598 insertions(+), 818 deletions(-) diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx index 12b3509..19121a1 100644 --- a/src/login/KcPage.tsx +++ b/src/login/KcPage.tsx @@ -104,10 +104,10 @@ const classes = { kcHeaderWrapperClass: "max-w-[600px] mx-auto", kcHeaderClass: - "mb-6 text-center text-[0.93rem] tracking-[0.01em] text-mac-text-secondary", + "mb-6 text-center text-[0.93rem] tracking-[0.01em] text-muted-foreground", kcFormCardClass: - "relative w-full sm:w-[460px] rounded-3xl border border-mac-card-stroke bg-transparent px-4 py-5 sm:px-7 sm:py-[30px]", + "relative w-full sm:w-[460px] rounded-xl border border-border bg-card px-4 py-5 sm:px-7 sm:py-[30px]", kcFormHeaderClass: "relative grid grid-cols-[1fr_auto] gap-3 items-baseline mb-1", kcLocaleMainClass: "m-0 col-start-2 row-start-1 flex items-center", @@ -121,12 +121,12 @@ const classes = { kcFormGroupErrorClass: "", kcFormGroupHeader: "", kcLabelWrapperClass: "", - kcLabelClass: "block mb-1.5 text-[0.84rem] text-mac-text-secondary font-medium", + kcLabelClass: "block mb-1.5 text-[0.84rem] text-foreground font-medium", kcInputClass: "", kcInputLargeClass: "", kcTextareaClass: "", - kcInputErrorMessageClass: "block mt-1.5 text-[0.82rem] text-mac-error", + kcInputErrorMessageClass: "block mt-1.5 text-[0.82rem] text-destructive", kcButtonClass: "", kcButtonBlockClass: "", @@ -144,7 +144,7 @@ const classes = { kcFormOptionsWrapperClass: "flex items-center justify-end min-h-[44px]", kcAlertClass: - "flex items-center gap-2.5 rounded-xl mb-3.5 border border-white/45 backdrop-blur-md px-3 py-2.5", + "flex items-center gap-2.5 rounded-md mb-3.5 border border-border px-3 py-2.5", kcAlertTitleClass: "", kcLocaleClass: "", @@ -153,24 +153,24 @@ const classes = { kcLocaleListClass: "block list-none m-0", kcLocaleListItemClass: "list-none", kcLocaleItemClass: - "block px-3.5 py-2 text-[0.88rem] font-medium text-mac-text-primary transition-colors duration-120", + "block px-3.5 py-2 text-[0.88rem] font-medium text-foreground transition-colors duration-120", kcSelectAuthListClass: "grid gap-3", kcSelectAuthListItemClass: - "flex items-center gap-3 p-3 rounded-xl border border-white/45 bg-white/40 backdrop-blur-md transition-all duration-140 hover:border-white/70 hover:bg-white/50 hover:-translate-y-0.5 hover:shadow-lg", + "flex items-center gap-3 p-3 rounded-md border border-border bg-background transition-all duration-140 hover:border-input hover:bg-muted", kcSelectAuthListItemIconClass: - "shrink-0 w-10 h-10 rounded-full grid place-items-center bg-[rgba(70,98,138,0.12)] text-[#244672]", + "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: "", kcSelectAuthListItemHeadingClass: - "text-[0.96rem] font-semibold text-mac-text-primary leading-tight", + "text-[0.96rem] font-semibold text-foreground leading-tight", kcSelectAuthListItemDescriptionClass: - "text-[0.82rem] font-medium text-mac-text-secondary leading-snug flex flex-wrap gap-1", + "text-[0.82rem] font-medium text-muted-foreground leading-snug flex flex-wrap gap-1", kcSelectAuthListItemFillClass: "hidden", kcSelectAuthListItemTitle: - "m-0 mb-1 text-[0.9rem] font-semibold text-mac-text-secondary", + "m-0 mb-1 text-[0.9rem] font-semibold text-muted-foreground", kcFormSocialAccountSectionClass: "", kcFormSocialAccountListClass: "list-none m-0 p-0 grid gap-2", @@ -178,7 +178,7 @@ const classes = { kcFormSocialAccountGridItem: "", kcFormSocialAccountLinkClass: "", kcFormSocialAccountListButtonClass: - "flex items-center gap-2.5 w-full min-h-10 rounded-xl border border-white/45 bg-white/40 backdrop-blur-md px-3 py-2 text-[rgba(35,50,70,0.96)] no-underline transition-all duration-140", + "flex items-center gap-2.5 w-full min-h-10 rounded-md border border-border bg-background px-3 py-2 text-foreground no-underline transition-all duration-140 hover:bg-muted", kcFormSocialAccountNameClass: "text-[0.95rem] font-semibold leading-tight", kcCommonLogoIdP: "", @@ -187,8 +187,7 @@ const classes = { kcLoginOTPListItemHeaderClass: "flex items-center w-full", kcLoginOTPListItemIconClass: "hidden", kcLoginOTPListItemIconBodyClass: "hidden", - kcLoginOTPListItemTitleClass: - "text-[0.98rem] font-semibold text-[rgba(34,51,75,0.95)]", + kcLoginOTPListItemTitleClass: "text-[0.98rem] font-semibold text-foreground", kcInputWrapperClass: "grid gap-2", kcInputGroup: "", diff --git a/src/login/Template.tsx b/src/login/Template.tsx index 9d7ae34..94fa89a 100644 --- a/src/login/Template.tsx +++ b/src/login/Template.tsx @@ -93,12 +93,7 @@ export default function Template(props: TemplateProps) { - + {enabledLanguages.length > 1 && (
@@ -145,7 +140,7 @@ export default function Template(props: TemplateProps) { `alert-${message.type}`, kcClsx("kcAlertClass"), `pf-m-${message.type === "error" ? "danger" : message.type}`, - "mb-4 border-white/45 bg-white/40 backdrop-blur-md" + "mb-4" )} >
- + {msg("consentDenied")}
diff --git a/src/login/pages/QrLoginSuccess.tsx b/src/login/pages/QrLoginSuccess.tsx index 033c57e..d9f2964 100644 --- a/src/login/pages/QrLoginSuccess.tsx +++ b/src/login/pages/QrLoginSuccess.tsx @@ -17,7 +17,7 @@ export default function QrLoginSuccess(props: PageProps
- + {msg("successQrCodeLoginMessage")}
diff --git a/src/login/pages/QrLoginVerify.tsx b/src/login/pages/QrLoginVerify.tsx index 57846c5..399cf66 100644 --- a/src/login/pages/QrLoginVerify.tsx +++ b/src/login/pages/QrLoginVerify.tsx @@ -20,7 +20,7 @@ export default function QrLoginVerify(props: PageProps
- + {msg("doQrCodeWarning")} diff --git a/src/login/tailwind.css b/src/login/tailwind.css index 9d5fcee..d89b790 100644 --- a/src/login/tailwind.css +++ b/src/login/tailwind.css @@ -2,35 +2,9 @@ @import "tw-animate-css"; @theme inline { - --font-sans: "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, - sans-serif; + --font-sans: "Inter", "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", + system-ui, sans-serif; - /* macOS theme tokens */ - --color-mac-text-primary: #17202b; - --color-mac-text-secondary: #4d5b70; - --color-mac-primary: #2c73ff; - --color-mac-primary-press: #245fd0; - --color-mac-error: #b4253e; - --color-mac-error-text: #872741; - --color-mac-info-text: #1a4377; - --color-mac-link: #2468e8; - --color-mac-link-hover: #1a5fd1; - - --color-mac-bg-top: #e6f0ff; - --color-mac-bg-bottom: #f5f9ff; - - --color-mac-card-bg: rgba(255, 255, 255, 0.32); - --color-mac-card-stroke: rgba(255, 255, 255, 0.52); - --color-mac-divider: rgba(23, 32, 43, 0.12); - --color-mac-control-bg: rgba(255, 255, 255, 0.42); - --color-mac-control-bg-focus: rgba(255, 255, 255, 0.62); - - --color-mac-orb-a: rgba(60, 149, 255, 0.35); - --color-mac-orb-b: rgba(114, 89, 255, 0.22); - --color-mac-orb-c: rgba(30, 182, 146, 0.24); - --color-mac-focus: rgba(63, 133, 255, 0.45); - - /* shadcn/ui semantic tokens */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); @@ -59,25 +33,25 @@ @layer base { :root { - --background: hsl(213 100% 98%); - --foreground: hsl(213 29% 13%); - --card: hsl(0 0% 100% / 0.85); - --card-foreground: hsl(213 29% 13%); + --background: hsl(0 0% 100%); + --foreground: hsl(222.2 84% 4.9%); + --card: hsl(0 0% 100%); + --card-foreground: hsl(222.2 84% 4.9%); --popover: hsl(0 0% 100%); - --popover-foreground: hsl(213 29% 13%); - --primary: hsl(217 100% 58%); - --primary-foreground: hsl(0 0% 100%); - --secondary: hsl(213 50% 95%); - --secondary-foreground: hsl(213 29% 13%); - --muted: hsl(213 40% 92%); - --muted-foreground: hsl(218 18% 37%); - --accent: hsl(217 100% 95%); - --accent-foreground: hsl(213 29% 13%); - --destructive: hsl(350 66% 43%); - --destructive-foreground: hsl(0 0% 100%); - --border: hsl(213 40% 85%); - --input: hsl(213 40% 85%); - --ring: hsl(217 100% 58%); + --popover-foreground: hsl(222.2 84% 4.9%); + --primary: hsl(222.2 47.4% 11.2%); + --primary-foreground: hsl(210 40% 98%); + --secondary: hsl(210 40% 96.1%); + --secondary-foreground: hsl(222.2 47.4% 11.2%); + --muted: hsl(210 40% 96.1%); + --muted-foreground: hsl(215.4 16.3% 46.9%); + --accent: hsl(210 40% 96.1%); + --accent-foreground: hsl(222.2 47.4% 11.2%); + --destructive: hsl(0 84.2% 60.2%); + --destructive-foreground: hsl(210 40% 98%); + --border: hsl(214.3 31.8% 91.4%); + --input: hsl(214.3 31.8% 91.4%); + --ring: hsl(222.2 84% 4.9%); --radius: 0.625rem; } @@ -92,65 +66,12 @@ margin: 0; min-height: 100%; font-family: var(--font-sans); - color: var(--color-mac-text-primary); - } - - body.kcBodyClass { - position: relative; - overflow-x: hidden; - background: linear-gradient( - 180deg, - var(--color-mac-bg-top) 0%, - var(--color-mac-bg-bottom) 100% - ), - radial-gradient( - circle at 6% 12%, - rgba(255, 255, 255, 0.9), - rgba(255, 255, 255, 0) - ); - } - - body.kcBodyClass::before, - body.kcBodyClass::after { - content: ""; - position: fixed; - z-index: 0; - pointer-events: none; - filter: blur(60px); - border-radius: 999px; - } - - body.kcBodyClass::before { - width: 40vw; - height: 40vw; - top: -16vw; - left: -10vw; - background: radial-gradient( - circle at 30% 30%, - var(--color-mac-orb-a), - rgba(60, 149, 255, 0) - ); - } - - body.kcBodyClass::after { - width: 48vw; - height: 48vw; - right: -18vw; - bottom: -18vw; - background: radial-gradient( - circle at 30% 30%, - var(--color-mac-orb-b), - rgba(114, 89, 255, 0) - ), - radial-gradient( - circle at 70% 70%, - var(--color-mac-orb-c), - rgba(30, 182, 146, 0) - ); + color: var(--color-foreground); + background: var(--color-background); } a { - color: var(--color-mac-link); + color: var(--color-primary); text-decoration: none; } @@ -160,99 +81,451 @@ } @layer components { - .kcFormCardClass { - position: relative; - box-shadow: 0 25px 50px -12px rgba(16, 30, 54, 0.18); + .kcLoginClass { + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding-top: 10vh; + padding-left: 1rem; + padding-right: 1rem; + padding-bottom: 2rem; } - .kcFormCardClass::before { - content: ""; - position: absolute; - inset: 0; - z-index: -1; - border-radius: inherit; - background: var(--color-mac-card-bg); - backdrop-filter: blur(32px) saturate(1.3); + .kcFormCardClass { + width: 100%; + max-width: 460px; + border-radius: var(--radius-lg); + border: 1px solid var(--color-border); + background: var(--color-card); + box-shadow: + 0 1px 3px 0 rgb(0 0 0 / 0.1), + 0 1px 2px -1px rgb(0 0 0 / 0.1); + } + + .kcHeaderClass { + margin-bottom: 1.5rem; + text-align: center; + font-size: 0.875rem; + color: var(--color-muted-foreground); } .kcFormHeaderClass h1, #kc-page-title { margin: 0; - font-size: clamp(1.5rem, 2.5vw, 1.9rem); - line-height: 1.15; - letter-spacing: -0.025em; + font-size: 1.5rem; + line-height: 1.25; font-weight: 600; - text-wrap: balance; - grid-column: 1; - grid-row: 1; - min-width: 0; + letter-spacing: -0.025em; + color: var(--color-card-foreground); } .kcFormHeaderClass h2, #kc-social-providers h2 { - margin: 0 0 10px; - font-size: 1.05rem; - font-weight: 400; - letter-spacing: -0.01em; - color: var(--color-mac-text-primary); + margin: 0 0 0.75rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-muted-foreground); } - #kc-info-message { + .kcFormClass, + #kc-form-wrapper, + #kc-content-wrapper form { display: grid; gap: 1rem; - text-align: center; } - #kc-info-message .instruction { - margin: 0; - padding: 1rem 1.25rem; - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.45); - background: rgba(255, 255, 255, 0.35); - backdrop-filter: blur(12px); - color: var(--color-mac-text-primary); - font-size: 0.96rem; - line-height: 1.5; + .kcFormGroupClass { + display: grid; + gap: 0.5rem; + } + + .kcLabelClass, + label:not([class]) { + font-size: 0.875rem; font-weight: 500; + color: var(--color-foreground); } - #kc-info-message a { + .kcInputClass, + .kcTextareaClass, + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not( + [type="button"] + ), + select, + textarea { + width: 100%; + min-height: 2.5rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-input); + background: var(--color-background); + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + line-height: 1.25rem; + color: var(--color-foreground); + transition: + color 150ms ease, + background-color 150ms ease, + border-color 150ms ease, + box-shadow 150ms ease; + } + + .kcInputClass:focus, + .kcTextareaClass:focus, + input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not( + [type="button"] + ):focus, + select:focus, + textarea:focus { + outline: none; + border-color: var(--color-ring); + box-shadow: 0 0 0 1px var(--color-ring); + } + + .kcInputErrorMessageClass { + font-size: 0.75rem; + color: var(--color-destructive); + } + + .kcButtonClass, + button, + input[type="submit"], + input[type="button"] { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; - min-height: 44px; - padding: 0.6rem 1.25rem; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.55); - background: rgba(255, 255, 255, 0.32); - backdrop-filter: blur(8px); - color: var(--color-mac-text-primary); - font-size: 0.95rem; - font-weight: 600; + min-height: 2.5rem; + border-radius: var(--radius-md); + border: 1px solid transparent; + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 500; + line-height: 1.25rem; + cursor: pointer; + transition: + color 150ms ease, + background-color 150ms ease, + border-color 150ms ease, + box-shadow 150ms ease; + } + + .kcButtonPrimaryClass, + #kc-login, + #kc-register, + #kc-update, + #kc-otp-login, + #kc-passkey-login { + background: var(--color-primary); + color: var(--color-primary-foreground); + } + + .kcButtonPrimaryClass:hover, + #kc-login:hover, + #kc-register:hover, + #kc-update:hover, + #kc-otp-login:hover, + #kc-passkey-login:hover { + background: color-mix(in oklab, var(--color-primary) 90%, transparent); + } + + .kcButtonDefaultClass, + .kcButtonSecondaryClass, + #cancel-aia, + #try-another-way { + background: var(--color-secondary); + color: var(--color-secondary-foreground); + border-color: var(--color-border); + } + + .kcButtonDefaultClass:hover, + .kcButtonSecondaryClass:hover, + #cancel-aia:hover, + #try-another-way:hover { + background: color-mix(in oklab, var(--color-secondary) 90%, transparent); + } + + #kc-form-buttons { + margin-top: 0.75rem; + } + + div#kc-form-buttons { + margin-top: 0.75rem; + } + + .kcFormSettingClass { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + margin-top: 0.75rem; + padding-top: 0.75rem; + } + + .kcFormOptionsClass, + #kc-info { + border-top: 1px solid var(--color-border); + } + + #kc-info { + padding-top: 1rem; + margin-top: 1rem; + } + + #rememberMe, + #logout-sessions { + appearance: none; + width: 1rem; + height: 1rem; + margin: 0; + border-radius: var(--radius-sm); + border: 1px solid var(--color-border); + background: var(--color-background); + cursor: pointer; + position: relative; + transition: + border-color 150ms ease, + background-color 150ms ease; + } + + #rememberMe::after, + #logout-sessions::after { + content: ""; + position: absolute; + left: 50%; + top: 45%; + width: 0.5rem; + height: 0.25rem; + border: solid var(--color-primary-foreground); + border-width: 0 0 1.5px 1.5px; + transform: translate(-50%, -50%) rotate(-45deg) scale(0); + opacity: 0; + transition: + transform 150ms ease, + opacity 150ms ease; + } + + #rememberMe:checked, + #logout-sessions:checked { + border-color: var(--color-primary); + background: var(--color-primary); + } + + #rememberMe:checked::after, + #logout-sessions:checked::after { + transform: translate(-50%, -50%) rotate(-45deg) scale(1); + opacity: 1; + } + + #rememberMe:focus-visible, + #logout-sessions:focus-visible { + outline: none; + box-shadow: + 0 0 0 2px var(--color-background), + 0 0 0 4px var(--color-ring); + } + + #kc-current-locale-link { + display: inline-flex; + align-items: center; + gap: 0.25rem; + height: 2rem; + border-radius: 9999px; + border: 1px solid var(--color-border); + background: var(--color-background); + padding: 0 0.5rem; + font-size: 0.75rem; + font-weight: 500; + color: var(--color-muted-foreground); + cursor: pointer; + transition: + border-color 150ms ease, + background-color 150ms ease; + } + + #kc-current-locale-link:hover, + #kc-current-locale-link[aria-expanded="true"] { + background: var(--color-muted); + } + + .kcLocaleListClass { + display: block; + list-style: none; + margin: 0; + padding: 0.25rem 0; + position: absolute; + top: calc(100% + 0.5rem); + right: 0; + min-width: 10rem; + z-index: 30; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-background); + box-shadow: + 0 4px 6px -1px rgb(0 0 0 / 0.1), + 0 2px 4px -2px rgb(0 0 0 / 0.1); + opacity: 0; + visibility: hidden; + transform: translateY(-0.25rem); + transform-origin: top right; + transition: + opacity 150ms ease, + transform 150ms ease, + visibility 150ms ease; + } + + #kc-current-locale-link[aria-expanded="true"] + .kcLocaleListClass { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + .kcLocaleItemClass { + display: block; + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + color: var(--color-foreground); + } + + .kcLocaleItemClass:hover { + background: var(--color-muted); + text-decoration: none; + } + + .kcAlertClass { + display: flex; + align-items: center; + gap: 0.75rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-background); + padding: 0.75rem 1rem; + font-size: 0.875rem; + color: var(--color-foreground); + } + + .alert-error.kcAlertClass, + .pf-m-danger.kcAlertClass { + border-color: var(--color-destructive); + background: color-mix(in oklab, var(--color-destructive) 10%, transparent); + color: var(--color-destructive); + } + + .kcFormSocialAccountListButtonClass { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; + min-height: 2.25rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-background); + padding: 0.5rem 0.75rem; + font-size: 0.875rem; + font-weight: 500; + color: var(--color-foreground); text-decoration: none; transition: - transform 130ms ease, - filter 130ms ease, - box-shadow 130ms ease, - background-color 130ms ease; - box-shadow: 0 10px 22px -12px rgba(16, 30, 54, 0.15); + background-color 150ms ease, + border-color 150ms ease; } - #kc-info-message a:hover { - background: rgba(255, 255, 255, 0.62); - transform: translateY(-1px); - box-shadow: 0 14px 28px -12px rgba(16, 30, 54, 0.2); + .kcFormSocialAccountListButtonClass:hover { + background: var(--color-muted); text-decoration: none; } - #kc-info-message a:active { - transform: translateY(1px); - background: rgba(255, 255, 255, 0.38); - box-shadow: 0 6px 14px -10px rgba(16, 30, 54, 0.12); + .kcSelectAuthListItemClass { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-background); + transition: + background-color 150ms ease, + border-color 150ms ease; } + .kcSelectAuthListItemClass:hover { + background: var(--color-muted); + border-color: var(--color-input); + } + + .kcSelectAuthListItemHeadingClass { + font-size: 0.875rem; + font-weight: 600; + color: var(--color-foreground); + } + + .kcSelectAuthListItemDescriptionClass { + font-size: 0.75rem; + color: var(--color-muted-foreground); + } + + .kcLoginOTPListClass { + position: relative; + display: flex; + align-items: center; + min-height: 2.75rem; + margin: 0; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-background); + padding: 0.625rem 0.75rem 0.625rem 2.25rem; + color: var(--color-foreground); + cursor: pointer; + user-select: none; + transition: + border-color 150ms ease, + background-color 150ms ease; + } + + .kcLoginOTPListClass::before { + content: ""; + position: absolute; + left: 0.75rem; + width: 1rem; + height: 1rem; + border-radius: 50%; + border: 1px solid var(--color-border); + background: var(--color-background); + } + + .kcLoginOTPListClass:hover { + background: var(--color-muted); + } + + .kcLoginOTPListInputClass:checked + .kcLoginOTPListClass { + border-color: var(--color-primary); + background: color-mix(in oklab, var(--color-primary) 5%, transparent); + } + + .kcLoginOTPListInputClass:checked + .kcLoginOTPListClass::before { + border-color: var(--color-primary); + background: var(--color-primary); + box-shadow: inset 0 0 0 3px var(--color-background); + } + + #kc-username { + display: flex; + align-items: center; + justify-content: space-between; + gap: 0.75rem; + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + padding: 0.625rem 0.75rem; + background: var(--color-muted); + } + + .kc-tooltip-text { + display: none; + } + + /* QR-code pages */ #com-hadleyso-qr-auth, #kc-qr-verify-form, #kc-qr-success-message, @@ -266,35 +539,33 @@ .kcQrCodeContainer { width: min(220px, 60%); aspect-ratio: 1 / 1; - padding: 12px; - border-radius: 20px; - border: 1px solid rgba(255, 255, 255, 0.55); - background: rgba(255, 255, 255, 0.45); - backdrop-filter: blur(12px); - box-shadow: 0 8px 24px -12px rgba(21, 43, 80, 0.2); + padding: 0.75rem; + border-radius: var(--radius-lg); + border: 1px solid var(--color-border); + background: var(--color-background); display: grid; place-items: center; cursor: pointer; transition: - transform 0.14s ease, - box-shadow 0.14s ease; + border-color 150ms ease, + box-shadow 150ms ease; } .kcQrCodeContainer:hover { - transform: translateY(-2px); - box-shadow: 0 12px 28px -12px rgba(21, 43, 80, 0.28); + border-color: var(--color-input); + box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1); } .kcQrCodeImage { width: 100%; height: 100%; object-fit: contain; - border-radius: 8px; + border-radius: var(--radius-sm); } .kcQrCodePlaceholder { - color: var(--color-mac-text-secondary); - font-size: 0.9rem; + color: var(--color-muted-foreground); + font-size: 0.875rem; font-weight: 500; text-align: center; } @@ -305,45 +576,42 @@ .kcQrSessionClass { margin: 0; - font-size: 0.9rem; + font-size: 0.875rem; font-weight: 500; - color: var(--color-mac-text-secondary); + color: var(--color-muted-foreground); text-align: center; } .kcQrSessionClass b { - color: var(--color-mac-text-primary); + color: var(--color-foreground); font-weight: 600; } .kcQrShortCodeZone { margin: 0; - font-size: 0.88rem; + font-size: 0.875rem; font-weight: 500; - color: var(--color-mac-text-secondary); + color: var(--color-muted-foreground); text-align: center; } .kcQrShortCodeZone a { - color: var(--color-mac-accent); + color: var(--color-primary); text-decoration: none; - transition: color 0.12s ease; } .kcQrShortCodeZone a:hover { - color: #006fe6; text-decoration: underline; } .kcQrShortCodeMessage { margin: 0; padding: 1rem 1.25rem; - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.45); - background: rgba(255, 255, 255, 0.35); - backdrop-filter: blur(12px); - color: var(--color-mac-text-primary); - font-size: 0.92rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-muted); + color: var(--color-foreground); + font-size: 0.875rem; line-height: 1.5; text-align: center; } @@ -356,10 +624,10 @@ .kcQrShortCodeInfoClass { margin: 0; - font-size: 0.92rem; + font-size: 0.875rem; font-weight: 500; line-height: 1.5; - color: var(--color-mac-text-secondary); + color: var(--color-muted-foreground); text-align: center; } @@ -374,17 +642,17 @@ #com-hadleyso-qr-auth input[type="submit"] { width: 100%; - min-height: 44px; + min-height: 2.75rem; } .kcQrWarningClass { margin: 0; - padding: 0.9rem 1.1rem; - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.45); - background: rgba(255, 243, 205, 0.35); - color: #856404; - font-size: 0.92rem; + padding: 0.75rem 1rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: color-mix(in oklab, var(--color-destructive) 10%, transparent); + color: var(--color-destructive); + font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; @@ -392,15 +660,15 @@ .kcQrDeviceInfoClass { margin: 0; - font-size: 0.95rem; + font-size: 0.875rem; font-weight: 500; line-height: 1.5; - color: var(--color-mac-text-secondary); + color: var(--color-muted-foreground); text-align: center; } .kcQrDeviceInfoClass b { - color: var(--color-mac-text-primary); + color: var(--color-foreground); font-weight: 600; } @@ -415,22 +683,21 @@ align-items: center; justify-content: center; width: 100%; - min-height: 44px; - border-radius: 12px; - font-size: 0.98rem; - font-weight: 600; + min-height: 2.75rem; + border-radius: var(--radius-md); + font-size: 0.875rem; + font-weight: 500; text-decoration: none; - transition: all 0.13s ease; } .kcQrSuccessMessageClass { margin: 0; padding: 1rem 1.25rem; - border-radius: 16px; - border: 1px solid rgba(255, 255, 255, 0.45); - background: rgba(212, 237, 218, 0.35); - color: #155724; - font-size: 0.96rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-muted); + color: var(--color-foreground); + font-size: 0.875rem; font-weight: 500; line-height: 1.5; text-align: center; @@ -444,466 +711,47 @@ #kc-code p { margin: 0; - font-size: 0.95rem; + font-size: 0.875rem; font-weight: 500; line-height: 1.5; - color: var(--color-mac-text-secondary); + color: var(--color-muted-foreground); } #kc-code #error { - padding: 0.9rem 1.1rem; - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.45); - background: rgba(255, 220, 228, 0.3); - color: #b91c3a; - font-size: 0.92rem; + padding: 0.75rem 1rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-destructive); + background: color-mix(in oklab, var(--color-destructive) 10%, transparent); + color: var(--color-destructive); + font-size: 0.875rem; font-weight: 500; } #kc-code #error a { - color: var(--color-mac-accent); + color: var(--color-primary); text-decoration: underline; font-weight: 600; } #kc-code #code { width: 100%; - min-height: 52px; - padding: 12px 16px; - border-radius: 14px; - border: 1px solid rgba(255, 255, 255, 0.5); - background: rgba(255, 255, 255, 0.45); - backdrop-filter: blur(10px); - color: var(--color-mac-text-primary); + min-height: 3rem; + padding: 0.75rem 1rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-background); + color: var(--color-foreground); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 1.15rem; + font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; - box-shadow: 0 6px 18px -10px rgba(21, 43, 80, 0.12); - } - - .kcInputClass, - .kcTextareaClass, - input:not([type="checkbox"]):not([type="radio"]), - select, - textarea { - width: 100%; - border: 1px solid rgba(255, 255, 255, 0.45); - border-radius: 12px; - background: var(--color-mac-control-bg); - backdrop-filter: blur(8px); - color: var(--color-mac-text-primary); - padding: 11px 13px; - font: inherit; - transition: - border-color 160ms ease, - box-shadow 160ms ease, - transform 160ms ease, - background-color 160ms ease; - } - - .kcInputClass:focus, - .kcTextareaClass:focus, - input:focus, - select:focus, - textarea:focus { - outline: none; - border-color: rgba(255, 255, 255, 0.85); - background: var(--color-mac-control-bg-focus); - box-shadow: 0 0 0 4px var(--color-mac-focus); - transform: translateY(-1px); - } - - .kcButtonClass, - button, - input[type="submit"] { - border: 0; - border-radius: 12px; - font: inherit; - font-weight: 620; - letter-spacing: 0.01em; - cursor: pointer; - transition: - transform 130ms ease, - filter 130ms ease, - box-shadow 130ms ease, - background-color 130ms ease; - } - - /* Fix border-radius on buttons that might get overridden */ - .kcButtonPrimaryClass, - .kcButtonDefaultClass, - .kcButtonSecondaryClass, - #kc-login, - #kc-register, - #kc-update, - #kc-otp-login, - #kc-passkey-login, - #cancel-aia, - #try-another-way { - border-radius: 12px !important; - } - - .kcButtonPrimaryClass, - .kcButtonClass.kcButtonPrimaryClass, - #kc-login, - #kc-register, - #kc-update, - #kc-otp-login, - #kc-passkey-login { - width: 100%; - min-height: 44px; - color: #ffffff; - background: rgba(44, 115, 255, 0.82); - backdrop-filter: blur(8px); - border: 1px solid rgba(255, 255, 255, 0.35); - box-shadow: 0 10px 22px -12px rgba(44, 115, 255, 0.45); - } - - .kcButtonPrimaryClass:hover, - #kc-login:hover, - #kc-register:hover, - #kc-update:hover, - #kc-otp-login:hover, - #kc-passkey-login:hover { - transform: translateY(-1px); - background: rgba(44, 115, 255, 0.92); - box-shadow: 0 14px 28px -12px rgba(44, 115, 255, 0.55); - } - - .kcButtonPrimaryClass:active, - #kc-login:active, - #kc-register:active, - #kc-update:active, - #kc-otp-login:active, - #kc-passkey-login:active { - transform: translateY(1px); - background: rgba(36, 95, 208, 0.9); - box-shadow: 0 6px 14px -10px rgba(44, 115, 255, 0.35); - } - - .kcButtonDefaultClass, - .kcButtonSecondaryClass, - #cancel-aia, - #try-another-way { - width: 100%; - min-height: 44px; - color: var(--color-mac-text-primary); - background: rgba(255, 255, 255, 0.48); - backdrop-filter: blur(8px); - border: 1px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 10px 22px -12px rgba(16, 30, 54, 0.14); - } - - #try-another-way { - display: inline-flex; - align-items: center; - justify-content: center; - width: 100%; - min-height: 44px; - margin-top: 10px; - border-radius: 12px; - text-decoration: none; - font-weight: 400; - letter-spacing: 0.01em; - transition: - transform 130ms ease, - filter 130ms ease, - box-shadow 130ms ease, - background-color 130ms ease; - } - - .kcButtonDefaultClass:hover, - .kcButtonSecondaryClass:hover, - #cancel-aia:hover, - #try-another-way:hover { - transform: translateY(-1px); - background: rgba(255, 255, 255, 0.62); - box-shadow: 0 14px 28px -12px rgba(16, 30, 54, 0.2); - text-decoration: none; - } - - .kcButtonDefaultClass:active, - .kcButtonSecondaryClass:active, - #cancel-aia:active, - #try-another-way:active { - transform: translateY(1px); - background: rgba(255, 255, 255, 0.38); - box-shadow: 0 6px 14px -10px rgba(16, 30, 54, 0.12); - } - - #kc-form-buttons { - margin-top: 12px; - } - - div#kc-form-buttons { - margin-top: 12px; - } - - .kcFormSettingClass #kc-form-buttons, - .kcFormSettingClass div#kc-form-buttons { - margin-top: 0; - } - - .kcFormSettingClass #kc-form-options { - height: auto; - display: flex; - align-items: center; - } - - .kcFormSettingClass #kc-form-options a { - display: inline-flex; - align-items: center; - min-height: 44px; - } - - #kc-form-options, - .kcFormOptionsClass, - #kc-info { - border-top: 1px solid var(--color-mac-divider); - } - - #kc-info { - padding-top: 14px; - margin-top: 14px; - } - - #kc-form-options { - margin: 0; - padding: 0; - border: 0; - display: flex; - align-items: center; - height: 18px; - } - - #kc-form-options .checkbox { - margin: 0; - } - - #kc-form-options .checkbox label { - display: flex; - align-items: center; - gap: 8px; - height: 18px; - margin: 0; - cursor: pointer; - font-size: 0.96rem; - line-height: 1; - color: rgba(49, 64, 86, 0.95); - } - - #rememberMe, - #logout-sessions { - appearance: none; - width: 18px; - height: 18px; - margin: 0; - border-radius: 6px; - border: 1.5px solid rgba(100, 120, 145, 0.35); - background: rgba(255, 255, 255, 0.65); - box-shadow: - inset 0 1px 2px rgba(255, 255, 255, 0.9), - 0 1px 2px rgba(16, 30, 54, 0.06); - backdrop-filter: blur(4px); - cursor: pointer; - position: relative; - transition: - border-color 160ms ease, - background-color 160ms ease, - box-shadow 160ms ease; - } - - #rememberMe::after, - #logout-sessions::after { - content: ""; - position: absolute; - left: 50%; - top: 45%; - width: 9px; - height: 5px; - border: solid #ffffff; - border-width: 0 0 2px 2px; - transform: translate(-50%, -50%) rotate(-45deg) scale(0.7); - opacity: 0; - transition: - transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), - opacity 120ms ease; - } - - #rememberMe:hover, - #logout-sessions:hover { - border-color: rgba(100, 120, 145, 0.55); - background: rgba(255, 255, 255, 0.85); - } - - #rememberMe:checked, - #logout-sessions:checked { - border-color: rgba(44, 115, 255, 0.55); - background: rgba(44, 115, 255, 0.9); - box-shadow: 0 2px 6px -1px rgba(44, 115, 255, 0.35); - } - - #rememberMe:checked::after, - #logout-sessions:checked::after { - transform: translate(-50%, -50%) rotate(-45deg) scale(1); - opacity: 1; - } - - #rememberMe:focus-visible, - #logout-sessions:focus-visible { - outline: none; - box-shadow: 0 0 0 4px rgba(75, 134, 244, 0.28); - } - - #kc-current-locale-link { - display: inline-flex; - align-items: center; - gap: 5px; - height: 30px; - border-radius: 999px; - border: 1px solid rgba(255, 255, 255, 0.45); - background: rgba(255, 255, 255, 0.42); - backdrop-filter: blur(8px); - padding: 0 10px 0 8px; - font-size: 0.84rem; - font-weight: 520; - color: var(--color-mac-text-secondary); - cursor: pointer; - transition: - border-color 140ms ease, - box-shadow 140ms ease, - background-color 140ms ease; - } - - #kc-current-locale-link::before { - content: ""; - width: 14px; - height: 14px; - flex: 0 0 14px; - 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%20fill%3D%22rgba(80%2C%2096%2C%20117%2C%200.75)%22%3E%3Cpath%20d%3D%22M12%202C6.48%202%202%206.48%202%2012s4.48%2010%2010%2010%2010-4.48%2010-10S17.52%202%2012%202zm-1%2017.93c-3.95-.49-7-3.85-7-7.93%200-.62.08-1.21.21-1.79L9%2015v1c0%201.1.9%202%202%202v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55%200%201-.45%201-1V7h2c1.1%200%202-.9%202-2v-.41c2.93%201.19%205%204.06%205%207.41%200%202.08-.8%203.97-2.1%205.39z%22%2F%3E%3C%2Fsvg%3E"); - background-size: contain; - background-repeat: no-repeat; - background-position: center; - opacity: 0.9; - } - - #kc-current-locale-link::after { - content: ""; - width: 5px; - height: 5px; - border-right: 1.5px solid rgba(80, 96, 117, 0.7); - border-bottom: 1.5px solid rgba(80, 96, 117, 0.7); - transform: rotate(45deg) translateY(-2px); - transition: transform 140ms ease; - } - - #kc-current-locale-link:hover, - #kc-current-locale-link[aria-expanded="true"] { - border-color: rgba(255, 255, 255, 0.75); - background: rgba(255, 255, 255, 0.62); - box-shadow: 0 0 0 3px rgba(92, 145, 255, 0.14); - } - - #kc-current-locale-link[aria-expanded="true"]::after { - transform: rotate(225deg) translateY(1px); - } - - .kcLocaleListClass { - display: block; - list-style: none; - margin: 0; - padding: 6px 0; - position: absolute; - top: calc(100% + 8px); - right: 0; - min-width: 170px; - z-index: 30; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.55); - background: rgba(250, 252, 255, 0.94); - backdrop-filter: blur(24px) saturate(1.2); - box-shadow: 0 20px 50px -12px rgba(16, 26, 47, 0.3); - overflow: hidden; - opacity: 0; - visibility: hidden; - transform: translateY(-6px) scale(0.98); - transform-origin: top right; - transition: - opacity 180ms ease, - transform 180ms ease, - visibility 180ms ease; - } - - #kc-current-locale-link[aria-expanded="true"] + .kcLocaleListClass { - opacity: 1; - visibility: visible; - transform: translateY(0) scale(1); - } - - .kcLocaleItemClass:hover { - background: rgba(63, 129, 247, 0.12); - color: var(--color-mac-link-hover); - text-decoration: none; - } - - /* WebAuthn / Passkey cards */ - #kc-form-webauthn .kcFormOptionsClass { - margin: 0; - padding: 0; - border: 0; - display: grid; - gap: 10px; - } - - #kc-form-webauthn #kc-form-buttons { - margin-top: 14px; - } - - #register ~ input[type="submit"] { - margin-top: 14px; - } - - #register ~ #kc-webauthn-settings-form { - margin-top: 12px; - } - - #cancelWebAuthnAIA { - width: 100%; - min-height: 44px; - border-radius: 12px; - font: inherit; - font-weight: 620; - color: var(--color-mac-text-primary); - background: rgba(255, 255, 255, 0.48); - backdrop-filter: blur(8px); - border: 1px solid rgba(255, 255, 255, 0.5); - box-shadow: 0 10px 22px -12px rgba(16, 30, 54, 0.14); - cursor: pointer; - transition: - transform 130ms ease, - filter 130ms ease, - box-shadow 130ms ease, - background-color 130ms ease; - } - - #cancelWebAuthnAIA:hover { - transform: translateY(-1px); - background: rgba(255, 255, 255, 0.62); - box-shadow: 0 14px 28px -12px rgba(16, 30, 54, 0.2); - } - - #cancelWebAuthnAIA:active { - transform: translateY(1px); - background: rgba(255, 255, 255, 0.38); - box-shadow: 0 6px 14px -10px rgba(16, 30, 54, 0.12); } #kc-social-providers { - margin-top: 18px; - padding-top: 18px; + margin-top: 1rem; + padding-top: 1rem; border-top: 0; } @@ -915,12 +763,12 @@ display: flex; align-items: center; gap: 0.75rem; - margin: 0 0 12px; - font-size: 0.85rem; + margin: 0 0 0.75rem; + font-size: 0.75rem; font-weight: 600; - letter-spacing: 0.02em; + letter-spacing: 0.05em; text-transform: uppercase; - color: var(--color-mac-text-secondary); + color: var(--color-muted-foreground); text-align: center; } @@ -929,75 +777,7 @@ content: ""; flex: 1; height: 1px; - background: var(--color-mac-divider); - } - - .kcFormSocialAccountListButtonClass:hover { - text-decoration: none; - border-color: rgba(255, 255, 255, 0.7); - background: rgba(255, 255, 255, 0.55); - transform: translateY(-1px); - box-shadow: 0 12px 24px -16px rgba(21, 43, 80, 0.25); - } - - .kcFormSocialAccountListButtonClass:focus-visible { - outline: none; - box-shadow: 0 0 0 4px rgba(87, 142, 245, 0.24); - } - - .kcAlertClass { - color: var(--color-mac-info-text); - background: rgba(235, 244, 255, 0.45); - } - - .alert-error.kcAlertClass, - .pf-m-danger.kcAlertClass { - color: #b91c3a; - background: rgba(255, 220, 228, 0.3); - border-color: transparent; - } - - .kcSelectAuthListItemIconClass i { - display: inline-block; - width: 20px; - height: 20px; - font-size: 0; - color: transparent; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - vertical-align: middle; - } - - .kcSelectAuthListItemIconClass i.kcAuthenticatorPasswordClass { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); - } - - .kcSelectAuthListItemIconClass i.kcAuthenticatorOTPClass { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M17 1.01L7 1a2 2 0 00-2 2v18a2 2 0 002 2h10a2 2 0 002-2V3a2 2 0 00-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E"); - } - - .kcSelectAuthListItemIconClass i.kcAuthenticatorWebAuthnClass, - .kcSelectAuthListItemIconClass i.kcAuthenticatorWebAuthnPasswordlessClass { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M12.65 10A5.99 5.99 0 007 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 005.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E"); - } - - .kcSelectAuthListItemIconClass i.kcAuthenticatorDefaultClass { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/%3E%3C/svg%3E"); - } - - .kcSelectAuthListItemClass:has( - [data-kc-msg="auth-username-password-form-display-name"] - ) - .kcSelectAuthListItemIconClass - i.kcAuthenticatorDefaultClass { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); - } - - .kcSelectAuthListItemClass:has([data-kc-msg="ext-qr-code-login-display-name"]) - .kcSelectAuthListItemIconClass - i.kcAuthenticatorDefaultClass { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M3,11h8V3H3V11z M5,5h4v4H5V5z'/%3E%3Cpath d='M3,21h8v-8H3V21z M5,15h4v4H5V15z'/%3E%3Cpath d='M13,3v8h8V3H13z M19,9h-4V5h4V9z'/%3E%3Crect height='2' width='2' x='19' y='19'/%3E%3Crect height='2' width='2' x='13' y='13'/%3E%3Crect height='2' width='2' x='15' y='15'/%3E%3Crect height='2' width='2' x='13' y='17'/%3E%3Crect height='2' width='2' x='15' y='19'/%3E%3Crect height='2' width='2' x='17' y='17'/%3E%3Crect height='2' width='2' x='17' y='13'/%3E%3Crect height='2' width='2' x='19' y='15'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + background: var(--color-border); } .kcCommonLogoIdP { @@ -1049,7 +829,7 @@ 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/svg%3E"); + 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; @@ -1061,12 +841,12 @@ } #social-github .kcCommonLogoIdP::before { - 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%23181717%22%20d%3D%22M12%20.297c-6.63%200-12%205.373-12%2012%200%205.303%203.438%209.8%208.205%2011.385.6.113.82-.258.82-.577%200-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422%2018.07%203.633%2017.7%203.633%2017.7c-1.087-.744.084-.729.084-.729%201.205.084%201.838%201.236%201.838%201.236%201.07%201.835%202.809%201.305%203.495.998.108-.776.419-1.305.762-1.605-2.665-.3-5.466-1.332-5.466-5.93%200-1.31.465-2.38%201.235-3.22-.135-.303-.54-1.523.105-3.176%200%200%201.005-.322%203.3%201.23.96-.267%201.98-.399%203-.405%201.02.006%202.04.138%203%20.405%202.28-1.552%203.285-1.23%203.285-1.23.645%201.653.24%202.873.12%203.176.765.84%201.23%201.91%201.23%203.22%200%204.61-2.805%205.625-5.475%205.92.42.36.81%201.096.81%202.22%200%201.606-.015%202.896-.015%203.286%200%20.315.21.69.825.57C20.565%2022.092%2024%2017.592%2024%2012.297c0-6.627-5.373-12-12-12%22%2F%3E%3C%2Fsvg%3E"); + 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%23181717%22%20d%3D%22M12%20.297c-6.63%200-12%205.373-12%2012c0%205.303%203.438%209.8%208.205%2011.385.6.113.82-.258.82-.577%200-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422%2018.07%203.633%2017.7%203.633%2017.7c-1.087-.744.084-.729.084-.729%201.205.084%201.838%201.236%201.838%201.236%201.07%201.835%202.809%201.305%203.495.998.108-.776.419-1.305.762-1.605-2.665-.3-5.466-1.332-5.466-5.93%200-1.31.465-2.38%201.235-3.22-.135-.303-.54-1.523.105-3.176%200%200%201.005-.322%203.3%201.23.96-.267%201.98-.399%203-.405%201.02.006%202.04.138%203%20.405%202.28-1.552%203.285-1.23%203.285-1.23.645%201.653.24%202.873.12%203.176.765.84%201.23%201.91%201.23%203.22%200%204.61-2.805%205.625-5.475%205.92.42.36.81%201.096.81%202.22%200%201.606-.015%202.896-.015%203.286%200%20.315.21.69.825.57C20.565%2022.092%2024%2017.592%2024%2012.297c0-6.627-5.373-12-12-12%22%2F%3E%3C%2Fsvg%3E"); } @media (prefers-color-scheme: dark) { #social-github .kcCommonLogoIdP::before { - 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%23fff%22%20d%3D%22M12%20.297c-6.63%200-12%205.373-12%2012%200%205.303%203.438%209.8%208.205%2011.385.6.113.82-.258.82-.577%200-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422%2018.07%203.633%2017.7%203.633%2017.7c-1.087-.744.084-.729.084-.729%201.205.084%201.838%201.236%201.838%201.236%201.07%201.835%202.809%201.305%203.495.998.108-.776.419-1.305.762-1.605-2.665-.3-5.466-1.332-5.466-5.93%200-1.31.465-2.38%201.235-3.22-.135-.303-.54-1.523.105-3.176%200%200%201.005-.322%203.3%201.23.96-.267%201.98-.399%203-.405%201.02.006%202.04.138%203%20.405%202.28-1.552%203.285-1.23%203.285-1.23.645%201.653.24%202.873.12%203.176.765.84%201.23%201.91%201.23%203.22%200%204.61-2.805%205.625-5.475%205.92.42.36.81%201.096.81%202.22%200%201.606-.015%202.896-.015%203.286%200%20.315.21.69.825.57C20.565%2022.092%2024%2017.592%2024%2012.297c0-6.627-5.373-12-12-12%22%2F%3E%3C%2Fsvg%3E"); + 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%23fff%22%20d%3D%22M12%20.297c-6.63%200-12%205.373-12%2012c0%205.303%203.438%209.8%208.205%2011.385.6.113.82-.258.82-.577%200-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422%2018.07%203.633%2017.7%203.633%2017.7c-1.087-.744.084-.729.084-.729%201.205.084%201.838%201.236%201.838%201.236%201.07%201.835%202.809%201.305%203.495.998.108-.776.419-1.305.762-1.605-2.665-.3-5.466-1.332-5.466-5.93%200-1.31.465-2.38%201.235-3.22-.135-.303-.54-1.523.105-3.176%200%200%201.005-.322%203.3%201.23.96-.267%201.98-.399%203-.405%201.02.006%202.04.138%203%20.405%202.28-1.552%203.285-1.23%203.285-1.23.645%201.653.24%202.873.12%203.176.765.84%201.23%201.91%201.23%203.22%200%204.61-2.805%205.625-5.475%205.92.42.36.81%201.096.81%202.22%200%201.606-.015%202.896-.015%203.286%200%20.315.21.69.825.57C20.565%2022.092%2024%2017.592%2024%2012.297c0-6.627-5.373-12-12-12%22%2F%3E%3C%2Fsvg%3E"); } } @@ -1101,81 +881,87 @@ 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%23EE333A%22%20d%3D%22M12%200C5.373%200%200%205.373%200%2012c0%206.628%205.373%2012%2012%2012s12-5.372%2012-12c0-6.627-5.373-12-12-12zm0%203.639c.851%200%201.656.18%202.39.501L13.39%207.93a4.608%204.608%200%2000-1.39-.216%204.64%204.64%200%2000-4.635%204.635%204.64%204.64%200%20004.635%204.635%204.608%204.608%200%20001.39-.216l1.001%203.79A8.338%208.338%200%200112%2020.361%208.36%208.36%200%20013.639%2012%208.36%208.36%200%200112%203.639zm5.592%202.39a8.338%208.338%200%20011.732%205.971%208.338%208.338%200%2001-1.732%205.971l-2.89-2.127a4.646%204.646%200%20000-7.688l2.89-2.127z%22%2F%3E%3C%2Fsvg%3E"); } - .kcLoginOTPListClass { - position: relative; - display: flex; - align-items: center; - min-height: 44px; + .kcSelectAuthListItemIconClass i { + display: inline-block; + width: 20px; + height: 20px; + font-size: 0; + color: transparent; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + vertical-align: middle; + } + + .kcSelectAuthListItemIconClass i.kcAuthenticatorPasswordClass { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); + } + + .kcSelectAuthListItemIconClass i.kcAuthenticatorOTPClass { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M17 1.01L7 1a2 2 0 00-2 2v18a2 2 0 002 2h10a2 2 0 002-2V3a2 2 0 00-2-1.99zM17 19H7V5h10v14z'/%3E%3C/svg%3E"); + } + + .kcSelectAuthListItemIconClass i.kcAuthenticatorWebAuthnClass, + .kcSelectAuthListItemIconClass i.kcAuthenticatorWebAuthnPasswordlessClass { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M12.65 10A5.99 5.99 0 007 6c-3.31 0-6 2.69-6 6s2.69 6 6 6a5.99 5.99 0 005.65-4H17v4h4v-4h2v-4H12.65zM7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E"); + } + + .kcSelectAuthListItemIconClass i.kcAuthenticatorDefaultClass { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z'/%3E%3C/svg%3E"); + } + + .kcSelectAuthListItemClass:has( + [data-kc-msg="auth-username-password-form-display-name"] + ) + .kcSelectAuthListItemIconClass + i.kcAuthenticatorDefaultClass { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E"); + } + + .kcSelectAuthListItemClass:has([data-kc-msg="ext-qr-code-login-display-name"]) + .kcSelectAuthListItemIconClass + i.kcAuthenticatorDefaultClass { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23244672'%3E%3Cg%3E%3Crect fill='none' height='24' width='24'/%3E%3C/g%3E%3Cg%3E%3Cg%3E%3Cpath d='M3,11h8V3H3V11z M5,5h4v4H5V5z'/%3E%3Cpath d='M3,21h8v-8H3V21z M5,15h4v4H5V15z'/%3E%3Cpath d='M13,3v8h8V3H13z M19,9h-4V5h4V9z'/%3E%3Crect height='2' width='2' x='19' y='19'/%3E%3Crect height='2' width='2' x='13' y='13'/%3E%3Crect height='2' width='2' x='15' y='15'/%3E%3Crect height='2' width='2' x='13' y='17'/%3E%3Crect height='2' width='2' x='15' y='19'/%3E%3Crect height='2' width='2' x='17' y='17'/%3E%3Crect height='2' width='2' x='17' y='13'/%3E%3Crect height='2' width='2' x='19' y='15'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); + } + + /* WebAuthn / Passkey cards */ + #kc-form-webauthn .kcFormOptionsClass { margin: 0; - border-radius: 12px; - border: 1px solid rgba(255, 255, 255, 0.45); - background: rgba(255, 255, 255, 0.32); - backdrop-filter: blur(8px); - padding: 10px 12px 10px 38px; - color: var(--color-mac-text-primary); + padding: 0; + border: 0; + display: grid; + gap: 10px; + } + + #kc-form-webauthn #kc-form-buttons { + margin-top: 14px; + } + + #register ~ input[type="submit"] { + margin-top: 14px; + } + + #register ~ #kc-webauthn-settings-form { + margin-top: 12px; + } + + #cancelWebAuthnAIA { + width: 100%; + min-height: 2.5rem; + border-radius: var(--radius-md); + border: 1px solid var(--color-border); + background: var(--color-secondary); + color: var(--color-secondary-foreground); + font: inherit; + font-weight: 500; cursor: pointer; - user-select: none; transition: - border-color 140ms ease, - background-color 140ms ease, - transform 140ms ease, - box-shadow 140ms ease; + background-color 150ms ease, + border-color 150ms ease; } - .kcLoginOTPListClass::before { - content: ""; - position: absolute; - left: 12px; - width: 16px; - height: 16px; - border-radius: 50%; - border: 1.5px solid rgba(103, 120, 143, 0.6); - background: rgba(255, 255, 255, 0.5); - box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.5); - } - - .kcLoginOTPListClass:hover { - border-color: rgba(255, 255, 255, 0.7); - background: rgba(255, 255, 255, 0.48); - transform: translateY(-1px); - } - - .kcLoginOTPListInputClass:checked + .kcLoginOTPListClass { - border-color: rgba(255, 255, 255, 0.55); - background: rgba(71, 129, 255, 0.2); - box-shadow: 0 0 0 3px rgba(95, 144, 244, 0.2); - } - - .kcLoginOTPListInputClass:checked + .kcLoginOTPListClass::before { - border-color: rgba(49, 112, 223, 0.95); - box-shadow: - inset 0 0 0 4px rgba(255, 255, 255, 1), - inset 0 0 0 8px rgba(49, 112, 223, 0.95); - } - - .kcLoginOTPListInputClass:focus-visible + .kcLoginOTPListClass { - box-shadow: 0 0 0 4px rgba(95, 144, 244, 0.28); - } - - .kcLoginOTPListItemIconBodyClass, - .kcLoginOTPListItemIconClass { - display: none; - } - - #kc-username { - display: flex; - align-items: center; - justify-content: space-between; - gap: 12px; - border: 1px solid rgba(255, 255, 255, 0.45); - border-radius: 12px; - padding: 10px 12px; - background: rgba(255, 255, 255, 0.35); - backdrop-filter: blur(8px); - } - - .kc-tooltip-text { - display: none; + #cancelWebAuthnAIA:hover { + background: color-mix(in oklab, var(--color-secondary) 90%, transparent); } } @@ -1203,8 +989,8 @@ } .kcFormCardClass { - border-radius: 18px; - padding: 22px 16px 20px; + border-radius: var(--radius-lg); + padding: 1.5rem 1rem; } .kcFormSettingClass {