… */
/* ------------------------------------------------------------------ */
#kc-form .pf-v5-c-form__group:has(> .pf-v5-c-form__group) {
margin: 0 0 0.15rem;
padding: 0;
border: 0;
background: none;
box-shadow: none;
}
#kc-form
.pf-v5-c-form__group:has(> .pf-v5-c-form__label),
#kc-form
.pf-v5-c-form__group:has(> .pf-v5-c-form__group) > .pf-v5-c-form__group:has(> .pf-v5-c-form__label) {
position: static;
margin: 0 0 0.85rem;
padding-top: 0;
}
#kc-form .pf-v5-c-form__group:has(> .pf-v5-c-form__label) > .pf-v5-c-form__label:first-of-type,
#kc-form .pf-v5-c-form__group:has(> .pf-v5-c-input-group) > .pf-v5-c-form__label:first-of-type,
#kc-form
.pf-v5-c-form__group:has(> .pf-v5-c-form__group)
.pf-v5-c-form__group:has(> .pf-v5-c-form__label)
> .pf-v5-c-form__label:first-of-type,
#kc-form
.pf-v5-c-form__group:has(> .pf-v5-c-form__group)
.pf-v5-c-form__group:has(> .pf-v5-c-input-group)
> .pf-v5-c-form__label:first-of-type {
position: static;
z-index: auto;
left: auto;
top: auto;
width: auto;
max-width: none;
display: block;
margin: 0 0 0.35rem;
padding: 0;
line-height: 1.2;
transform: none;
background: transparent;
border-radius: 0;
pointer-events: auto;
box-shadow: none;
}
#kc-form
.pf-v5-c-form__group:has(> .pf-v5-c-form__label, > .pf-v5-c-form__group)
.pf-v5-c-form__label[for],
#kc-form
.pf-v5-c-form__group
.pf-v5-c-form__group:has(> .pf-v5-c-form__label)
.pf-v5-c-form__label[for] {
display: block;
margin: 0 0 0.35rem;
padding: 0;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
color: #374151 !important;
background: transparent;
line-height: 1.2;
box-shadow: none;
}
#kc-form
.pf-v5-c-form__group:has(> .pf-v5-c-form__label)
.pf-v5-c-form__label-text,
#kc-form
.pf-v5-c-form__group
.pf-v5-c-form__group:has(> .pf-v5-c-form__label)
.pf-v5-c-form__label-text {
color: #374151 !important;
font: inherit;
}
#kc-form .pf-v5-c-form__label .pf-v5-c-form__label-required,
#kc-form [class*="required"] {
color: #b91c1c;
}
/* ------------------------------------------------------------------ */
/* Text inputs — light fill, not charcoal bars (always target input) */
/* ------------------------------------------------------------------ */
#kc-form .pf-v5-c-form-control:has(> input:not([type="checkbox"])),
#kc-form .pf-v5-c-form-control:has(> input[type="text"]),
#kc-form .pf-v5-c-form-control:has(> input[type="email"]),
#kc-form .pf-v5-c-form-control:has(> input[type="password"]) {
background: var(--ucf-input-bg) !important;
border: 1px solid var(--ucf-border) !important;
border-radius: 0.5rem !important;
box-shadow: none !important;
min-height: 3rem;
}
#kc-form
.pf-v5-c-form-control
> input,
#kc-form
.pf-v5-c-form-control
> input[readonly] {
--pf-v5-c-form-control--m-read-only--Color: #111827;
--pf-v5-c-form-control--m-read-only--before--BorderColor: var(--ucf-border);
background: transparent !important;
color: #111827 !important;
border: none !important;
font-size: 0.95rem;
font-weight: 500;
padding: 0.5rem 0.75rem !important;
border-radius: 0.5rem !important;
box-shadow: none !important;
outline: none;
}
#kc-form .pf-v5-c-form-control:focus-within,
#kc-form
.pf-v5-c-input-group:focus-within
.pf-v5-c-form-control:has(> input) {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--ucf-gold-soft) !important;
border-color: var(--ucf-gold) !important;
outline: none;
}
#kc-form .pf-v5-c-form-control:has(> input):hover {
border-color: #9ca3af;
}
/* Browser autofill paints a light-blue fill; keep UCF field colors. */
#kc-form .pf-v5-c-form-control > input:-webkit-autofill,
#kc-form .pf-v5-c-form-control > input:-webkit-autofill:hover,
#kc-form .pf-v5-c-form-control > input:-webkit-autofill:focus {
-webkit-text-fill-color: #111827;
caret-color: #111827;
transition: background-color 99999s ease-in-out 0s;
box-shadow: 0 0 0 1000px var(--ucf-input-bg) inset !important;
}
/* Password row: align toggle with field */
#kc-form .pf-v5-c-input-group {
display: flex;
align-items: stretch;
flex-wrap: nowrap;
min-height: 3rem;
background: var(--ucf-input-bg) !important;
border: 1px solid var(--ucf-border) !important;
border-radius: 0.5rem !important;
overflow: hidden;
}
#kc-form .pf-v5-c-input-group .pf-v5-c-form-control {
flex: 1;
min-width: 0;
min-height: 3rem !important;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
}
#kc-form .pf-v5-c-input-group .pf-m-fill {
flex: 1;
min-width: 0;
}
#kc-form .pf-v5-c-input-group .pf-v5-c-button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 2.75rem;
min-width: 2.75rem;
padding: 0 !important;
margin: 0 !important;
border: none;
border-inline-start: 1px solid var(--ucf-border) !important;
border-radius: 0;
color: #4b5563;
/* Eye icon via SVG — does not depend on Font Awesome webfont loading. */
background-color: #f3f4f6 !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 1.2rem 1.2rem;
}
#kc-form .pf-v5-c-input-group .pf-v5-c-button:hover {
background-color: #e5e7eb !important;
color: #111827;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
/* Keycloak toggles fa-eye / fa-eye-slash on the inner . */
#kc-form .pf-v5-c-input-group .pf-v5-c-button:has(i.fa-eye-slash),
#kc-form .pf-v5-c-input-group .pf-v5-c-button:has(i.fas.fa-eye-slash) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
#kc-form .pf-v5-c-input-group .pf-v5-c-button i,
#kc-form .pf-v5-c-input-group .pf-v5-c-button svg {
/* Keep for Keycloak JS class toggles; icon is drawn via button background. */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
opacity: 0;
}
#kc-form .pf-v5-c-input-group:focus-within {
box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--ucf-gold-soft) !important;
border-color: var(--ucf-gold) !important;
}
/* “Forgot password” link under field — not washed out */
#kc-form
.pf-v5-c-form__group
.pf-v5-c-form__helper-text
a,
#kc-form
.pf-v5-c-helper-text__item
a,
#kc-form
.pf-v5-c-helper-text__item-text
a {
color: #1d4ed8;
font-weight: 500;
font-size: 0.875rem;
text-decoration: none;
margin-top: 0.4rem;
display: inline-block;
}
#kc-form
.pf-v5-c-form__group
.pf-v5-c-form__helper-text
a:hover {
text-decoration: underline;
color: #1e3a8a;
}
/* ------------------------------------------------------------------ */
/* Remember me — readable, not a ghost of gray */
/* ------------------------------------------------------------------ */
#kc-form .pf-v5-c-check {
display: flex;
align-items: center;
gap: 0.4rem;
margin: 0.1rem 0 0.35rem;
}
#kc-form .pf-v5-c-check__input {
width: 1.05rem;
height: 1.05rem;
border-radius: 0.2rem;
border: 1px solid var(--ucf-border);
accent-color: var(--ucf-gold);
}
#kc-form .pf-v5-c-check__label,
#kc-form label.pf-v5-c-check__label {
color: var(--ucf-muted) !important;
font-size: 0.9rem;
font-weight: 500;
line-height: 1.4;
margin: 0;
padding: 0;
cursor: pointer;
}
#kc-form .pf-v5-c-check:hover .pf-v5-c-check__label {
color: #1f2937 !important;
}
/* ------------------------------------------------------------------ */
/* Primary sign-in — full width, clear */
/* ------------------------------------------------------------------ */
#kc-form .pf-v5-c-form__actions,
#kc-form .pf-v5-c-form__actions:only-child,
#kc-form [class*="form__actions"] {
margin-top: 0.65rem;
padding: 0;
width: 100%;
}
#kc-form .pf-v5-c-button.pf-m-primary,
#kc-login,
#kc-form .pf-m-primary#kc-login {
width: 100%;
padding: 0.65rem 1.25rem !important;
font-size: 1rem;
font-weight: 700;
border-radius: 0.5rem;
min-height: 2.75rem;
background-color: var(--ucf-gold) !important;
border-color: var(--ucf-gold) !important;
color: var(--ucf-black) !important;
text-transform: none;
letter-spacing: 0.01em;
}
#kc-form .pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
background-color: var(--ucf-gold-hover) !important;
border-color: var(--ucf-gold-hover) !important;
color: var(--ucf-black) !important;
filter: none;
}
#kc-form .pf-v5-c-button.pf-m-primary:focus-visible,
#kc-login:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--ucf-surface), 0 0 0 5px var(--ucf-gold) !important;
}
/* ------------------------------------------------------------------ */
/* Locale selector (if present) — match the card */
/* ------------------------------------------------------------------ */
.pf-v5-c-login__main-header .pf-v5-c-form-control {
max-width: 9rem;
}
.pf-v5-c-login__main-header .pf-v5-c-form-control:has(> select) {
background: #f3f4f6 !important;
border: 1px solid var(--ucf-border) !important;
border-radius: 0.375rem;
font-size: 0.8125rem;
}
/* ------------------------------------------------------------------ */
/* Alerts & registration footer */
/* ------------------------------------------------------------------ */
#kc-form-wrapper .pf-v5-c-alert {
font-size: 0.9rem;
border-radius: 0.5rem;
}
#kc-info,
#kc-info-wrapper,
#kc-registration,
.pf-v5-c-login__main .pf-v5-c-login__main-footer {
color: #6b7280;
font-size: 0.9rem;
}
#kc-info a,
#kc-registration a {
font-weight: 600;
color: #0f172a;
}
#kc-info a:hover,
#kc-registration a:hover {
color: var(--ucf-gold-hover);
}
.pf-v5-c-alert.pf-m-danger { border-inline-start: 3px solid #b91c1c; }
.pf-v5-c-alert.pf-m-success { border-inline-start: 3px solid #15803d; }
.pf-v5-c-alert.pf-m-info { border-inline-start: 3px solid var(--ucf-gold); }
/* ------------------------------------------------------------------ */
/* Entra SAML broker — centered “UCF SSO”, no small/wrong icon */
/* ------------------------------------------------------------------ */
.pf-v5-c-login__main-footer {
text-align: center;
padding: 0.5rem 1.25rem 1rem !important;
margin-top: 0 !important;
flex: 0 0 auto !important;
border-top: 1px solid #eef0f3;
}
.pf-v5-c-login__main-footer > .pf-v5-c-title,
#kc-social-providers-title,
.pf-v5-c-login__main-footer h2,
.pf-v5-c-login__main-footer .pf-v5-c-title {
text-align: center;
margin: 0.15rem 0 0.35rem !important;
padding: 0 !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
color: #6b7280 !important;
}
#kc-info,
#kc-registration {
text-align: center;
margin-top: 0.55rem;
margin-bottom: 0.15rem;
}
/* Social providers block often renders inside main-body with PF body padding. */
.pf-v5-c-login__main-body .pf-v5-c-login__main-body,
#kc-social-providers,
div[class*="kcFormSocialAccount"] {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
margin-top: 0.25rem !important;
}
.pf-v5-c-login__main-footer-links,
.pf-v5-c-login__main .pf-v5-c-login__main-footer-links,
ul.pf-v5-c-login__main-footer-links {
display: flex !important;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 0.35rem;
margin: 0.15rem 0 0 !important;
padding: 0 !important;
list-style: none;
}
.pf-v5-c-login__main-footer-links-item,
.pf-v5-c-login__main-footer li {
display: flex;
justify-content: center;
width: 100%;
}
#social-entra-saml,
a[href*="/broker/entra-saml/"].pf-v5-c-login__main-footer-links-item-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
max-width: 100%;
min-height: 2.5rem;
padding: 0.45rem 0.85rem !important;
border: 1px solid var(--ucf-border) !important;
border-radius: 0.5rem;
background: #fafafa !important;
font-size: 0 !important; /* hide IdP display name from admin */
line-height: 0;
color: transparent !important;
text-decoration: none !important;
box-sizing: border-box;
}
#social-entra-saml:hover,
a[href*="/broker/entra-saml/"].pf-v5-c-login__main-footer-links-item-link:hover {
background: #f3f4f6 !important;
border-color: #9ca3af !important;
}
#social-entra-saml::before,
a[href*="/broker/entra-saml/"].pf-v5-c-login__main-footer-links-item-link::before {
content: "";
flex-shrink: 0;
width: 1.35rem;
height: 1.35rem;
background: url("../img/ucfsmalllogo.png") no-repeat center / contain;
}
#social-entra-saml::after,
a[href*="/broker/entra-saml/"].pf-v5-c-login__main-footer-links-item-link::after {
content: "UCF Email";
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.01em;
color: #0f172a;
text-decoration: none;
}
#social-entra-saml:hover::after,
a[href*="/broker/entra-saml/"].pf-v5-c-login__main-footer-links-item-link:hover::after {
color: #0f172a;
text-decoration: none;
}
#social-entra-saml svg,
a[href*="/broker/entra-saml/"] svg,
#social-entra-saml img,
a[href*="/broker/entra-saml/"] img {
display: none !important;
}
/* ------------------------------------------------------------------ */
/* Mobile */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
* {
transition-duration: 0.01ms !important;
}
}