/* =================================================================
Babe Ecosystem — Casdoor Login Page Override
=================================================================
This stylesheet completely reskins Casdoor's default login page
to match the Babe Ecosystem UI. It is injected into Casdoor's
index.html at container startup via casdoor-entrypoint.sh.
STRUCTURE (DOM hierarchy):
.loginBackground ← outermost wrapper, full viewport
.login-content ← inner centering wrapper
.login-panel ← card/panel (Casdoor default: row layout)
.login-logo-box ← logo area (animated GIF + SVG)
.login-form ← form wrapper
.login-username ← username/email input row
.login-password ← password input row
.login-button-box ← sign-in button
.login-forget-password ← "パスワードリセット" link
KEY DESIGN DECISIONS:
- Casdoor defaults to flex-direction: row (logo left, form right).
We force column layout so everything stacks vertically.
- Ant Design Form.Item wrappers break CSS flex order, so button/
forgot-password reordering is done via JS (babe-login.js).
- All rules use !important to override Casdoor's inline styles.
================================================================= */
/* =================================================================
1. GLOBAL — full-height viewport, no scrollbars
-----------------------------------------------------------------
Ensures the page fills the entire viewport with no overflow.
Adjust min-height if you want scrollable content.
================================================================= */
html,
body,
#root {
height: 100% !important;
min-height: 100dvh !important; /* dynamic viewport height (respects mobile address bar) */
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* Hide scrollbars only on login page (don't break admin panel scrolling) */
body:has(.loginBackground) {
overflow-x: hidden !important;
overflow-y: hidden !important;
}
body:has(.loginBackground) #root {
overflow: hidden !important;
}
/* =================================================================
2. PAGE BACKGROUND — outermost container
-----------------------------------------------------------------
Controls the page background color and overall centering.
- background: page bg color (light grey to match Babe)
- align-items: flex-start → content starts from top (not vertically centered)
- padding-left/right: side gutters so content doesn't touch screen edges
================================================================= */
.loginBackground {
background: #f5f5f5 !important; /* page background color */
display: flex !important;
align-items: flex-start !important; /* start from top, not vertically centered */
justify-content: center !important; /* horizontally centered */
height: 100dvh !important;
min-height: 100dvh !important;
padding-top: 0 !important;
padding-left: 16px !important; /* side gutters */
padding-right: 16px !important; /* side gutters */
box-sizing: border-box !important;
overflow: hidden !important;
}
/* =================================================================
3. CONTENT WRAPPER — inner centering layer
-----------------------------------------------------------------
Sits inside .loginBackground and provides top padding to push
the login card down from the top of the viewport.
- padding-top: 120px → vertical offset from top (adjust to move card up/down)
================================================================= */
.login-content {
width: 100% !important;
height: 100% !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
margin-top: 0 !important;
padding-top: 120px !important; /* distance from top — increase to push card down, decrease to move up */
box-sizing: border-box !important;
transform: none !important; /* reset any Casdoor transforms */
overflow: hidden !important;
}
/* =================================================================
4. LOGIN PANEL — the main card container
-----------------------------------------------------------------
Casdoor default: display:flex; flex-direction:row (logo | form).
We force column layout so logo sits above the form.
- background: transparent → removes Casdoor's white card look
- width: outer panel max width (content children are narrower)
================================================================= */
.login-panel {
background: transparent !important; /* remove card background */
box-shadow: none !important; /* remove card shadow */
border: none !important; /* remove card border */
border-radius: 0 !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important; /* CRITICAL: stack logo above form (Casdoor default is row) */
align-items: center !important; /* center children horizontally */
justify-content: center !important;
width: min(1200px, 100%) !important; /* outer panel width — keeps things contained on wide screens */
max-width: 1200px !important;
min-width: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
/* =================================================================
5. FORM CONTENT MAX WIDTH — shared constraint for all form children
-----------------------------------------------------------------
Logo, form, button, and forgot-password all share the same max
width so they align visually. Adjust 480px to make the form
wider or narrower.
================================================================= */
.login-logo-box,
.login-form,
.login-forget-password,
.login-button-box {
width: min(480px, 100%) !important; /* form content width — adjust this to change form width */
max-width: 480px !important; /* hard cap — matches the value above */
margin-left: auto !important; /* center within panel */
margin-right: auto !important; /* center within panel */
}
/* =================================================================
6. CSS VARIABLES — shared colors for icons and placeholders
-----------------------------------------------------------------
Defined on .login-form so all children can reference them.
Change these to adjust icon/placeholder tint globally.
================================================================= */
.login-form {
--babe-input-icon-color: rgba(0, 0, 0, 0.38); /* icon color (email, lock, eye icons) */
--babe-input-placeholder-color: rgba(0, 0, 0, 0.38); /* placeholder text color */
}
/* =================================================================
7. LOGO BOX — layout for the logo area
-----------------------------------------------------------------
Centers the logo content within the panel.
================================================================= */
.login-logo-box {
display: flex !important;
justify-content: center !important;
flex-shrink: 0 !important; /* don't shrink logo when space is tight */
}
/* =================================================================
8. FORM WRAPPER — remove Casdoor's card styling from the form
-----------------------------------------------------------------
Casdoor wraps the form in a styled box. We strip that styling
so the form blends into the transparent panel.
================================================================= */
.login-form {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
min-width: 0 !important;
box-sizing: border-box !important;
flex: none !important;
}
/* =================================================================
9. ANT DESIGN FORM ITEM FULL WIDTH — force all nested wrappers to 100%
-----------------------------------------------------------------
Ant Design wraps each input in multiple nested divs (.ant-form-item,
.ant-row, .ant-col, etc.). Each layer can constrain width.
We force all of them to 100% so inputs fill the form width.
================================================================= */
.login-form form,
.login-form .ant-form-item,
.login-form .ant-row,
.login-form .ant-col,
.login-form .ant-form-item-control,
.login-form .ant-form-item-control-input,
.login-form .ant-form-item-control-input-content {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
/* =================================================================
10. LOGO — replace Casdoor logo with Babe logos via pseudo-elements
-----------------------------------------------------------------
Hides the original Casdoor logo ![]()
and uses ::before and ::after
on the logo's tag to show:
::before → animated GIF logo (logo-animation.gif)
::after → static SVG logo (logo.svg)
================================================================= */
/* 10a. Strip all backgrounds/borders from logo container and children */
.login-logo-box,
.login-logo-box *,
.login-logo-box a,
.login-logo-box div,
.login-logo-box span {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
box-shadow: none !important;
border: none !important;
}
/* 10b. Hide the original Casdoor logo image */
.login-logo-box img { display: none !important; }
.login-logo-box style,
.login-logo-box [style] > style { display: none !important; }
/* 10c. Logo link — column layout to stack GIF above SVG */
.login-logo-box a {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
pointer-events: none !important; /* disable clicking the logo */
text-decoration: none !important;
background: transparent !important;
}
/* 10d. Animated GIF logo (top logo)
- width/height: size of the animated logo
- margin-bottom: space between GIF and SVG logo
- background fallback color (#f5f5f5) matches page bg to hide GIF transparency artifacts */
.login-logo-box a::before {
content: '' !important;
display: block !important;
width: 114px !important; /* animated logo width */
height: 93px !important; /* animated logo height */
margin-bottom: 8px !important; /* space between animated logo and SVG logo */
background: url('https://dev2.babe1887.com/logo-animation.gif') center / contain no-repeat #f5f5f5 !important;
}
/* 10e. Static SVG logo (bottom logo, "BABE" text)
- margin-bottom: space between SVG logo and the form below */
.login-logo-box a::after {
content: '' !important;
display: block !important;
width: 150px !important; /* SVG logo width */
height: 57px !important; /* SVG logo height */
margin-bottom: 36px !important; /* space between logo and form */
background: url('https://dev2.babe1887.com/logo.svg') center / contain no-repeat transparent !important;
}
/* =================================================================
11. HIDE UNWANTED CASDOOR UI ELEMENTS
-----------------------------------------------------------------
Removes elements we don't want on the Babe login page:
- GitHub corner link (top-right octopus)
- Language switcher dropdown
- "Sign up" link
================================================================= */
.github-corner { display: none !important; }
.login-languages { display: none !important; }
.login-signup-link { display: none !important; }
/* 11d. Style Ant Design error toasts — red text with alert icon */
.ant-message-error .ant-message-custom-content,
.ant-message-notice-error .ant-message-notice-content {
color: #d32f2f !important;
font-weight: 500 !important;
}
.ant-message-error .anticon {
color: #d32f2f !important;
}
/* 11b. Broken provider/avatar images — hide broken img, show fallback */
img[src=""][alt="Sign"],
img[alt="Sign"],
img[alt="sign"],
.login-panel img:not(.login-logo-box img):not(.babe-mfa-ui img) {
display: none !important;
}
/* =================================================================
12. USERNAME ICON — replace user icon with email envelope icon
-----------------------------------------------------------------
Casdoor shows a "person" icon for username. We hide the SVG and
replace it with an email envelope via CSS ::before pseudo-element
using an inline SVG data URI.
================================================================= */
/* 12a. Hide the original Casdoor user SVG icon */
.login-username .ant-input-prefix .anticon svg,
.login-username-input .ant-input-prefix .anticon svg {
display: none !important;
}
/* 12b. Style the icon container (size, spacing, color) */
.login-username .ant-input-prefix .anticon,
.login-username-input .ant-input-prefix .anticon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 14px !important; /* icon size */
height: 14px !important; /* icon size */
margin-right: 12px !important; /* space between icon and input text */
color: var(--babe-input-icon-color) !important;
}
/* 12c. Email envelope icon via inline SVG data URI */
.login-username .ant-input-prefix .anticon::before,
.login-username-input .ant-input-prefix .anticon::before {
content: '' !important;
display: block !important;
width: 14px !important;
height: 14px !important;
background: url("data:image/svg+xml,%3Csvg viewBox='64 64 896 896' xmlns='http://www.w3.org/2000/svg' fill='%238c8c8c'%3E%3Cpath d='M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* =================================================================
13. PASSWORD & FORM ICONS — color consistency
-----------------------------------------------------------------
Ensures the password lock icon, eye toggle icon, and any other
form icons use the same muted color as the email icon.
================================================================= */
/* 13a. Set icon color for password prefix, input suffix (eye toggle) */
.login-password .ant-input-prefix .anticon,
.login-password-input .ant-input-prefix .anticon,
.login-form .ant-input-suffix .anticon,
.login-form .ant-input-password-icon {
color: var(--babe-input-icon-color) !important;
}
/* 13b. Password icon left margin (space between lock icon and input text) */
.login-password .ant-input-prefix .anticon,
.login-password-input .ant-input-prefix .anticon {
margin-right: 12px !important; /* same spacing as email icon */
}
/* 13c. Force SVG fill to inherit the color variable */
.login-password .ant-input-prefix .anticon svg,
.login-password-input .ant-input-prefix .anticon svg,
.login-form .ant-input-suffix .anticon svg,
.login-form .ant-input-password-icon svg {
color: currentColor !important;
fill: currentColor !important;
}
/* 13d. Force SVG path fill (some icons need path-level override) */
.login-password .ant-input-prefix .anticon svg path,
.login-password-input .ant-input-prefix .anticon svg path,
.login-form .ant-input-suffix .anticon svg path,
.login-form .ant-input-password-icon svg path {
fill: currentColor !important;
}
/* =================================================================
14. FORGOT PASSWORD LINK — centered below the sign-in button
-----------------------------------------------------------------
Note: The link appears above the button in the DOM by default.
JS (babe-login.js) reorders it below the button at runtime via
insertBefore(), since CSS order doesn't work through Ant Design
Form.Item wrappers.
================================================================= */
.login-forget-password {
text-align: center !important;
margin-top: 12px !important; /* space above the link (below button after JS reorder) */
margin-bottom: 0 !important;
width: 100% !important;
}
/* 14a. Hide the "remember me" checkbox (not used in Babe) */
.login-forget-password .ant-checkbox-wrapper { display: none !important; }
/* 14b. Link styling */
.login-forget-password a {
color: #1976d2 !important; /* MUI primary blue — matches button color */
font-size: 0.875rem !important; /* 14px */
text-decoration: underline !important;
}
/* =================================================================
15. INPUT FIELDS — MUI-style outlined text inputs
-----------------------------------------------------------------
Mimics Material UI's outlined TextField component.
================================================================= */
/* 15a. Input wrapper — border, padding, size */
.login-form .ant-input-affix-wrapper {
border: 1px solid rgba(0,0,0,0.23) !important; /* default border color */
border-radius: 4px !important; /* corner radius */
padding: 10px 16px !important; /* inner padding */
height: 56px !important; /* input height */
background: #fff !important; /* input background */
width: 100% !important;
box-sizing: border-box !important;
}
/* 15b. Hover state — darker border */
.login-form .ant-input-affix-wrapper:hover {
border-color: rgba(0,0,0,0.87) !important; /* hover border color */
}
/* 15c. Focus state — blue border, thicker line */
.login-form .ant-input-affix-wrapper-focused,
.login-form .ant-input-affix-wrapper:focus-within {
border-color: #1976d2 !important; /* focus border color (MUI primary blue) */
border-width: 2px !important; /* thicker border on focus */
box-shadow: none !important; /* remove Ant Design focus glow */
}
/* 15d. Input text styling */
.login-form .ant-input {
font-size: 1rem !important; /* 16px input text */
}
/* 15e. Placeholder text color */
.login-form .ant-input::placeholder,
.login-form input::placeholder {
color: var(--babe-input-placeholder-color) !important;
opacity: 1 !important;
}
/* 15f. Spacing between username and password fields */
.login-username, .login-password { margin-bottom: 16px !important; }
/* =================================================================
16. SIGN-IN BUTTON — MUI-style contained button
-----------------------------------------------------------------
Mimics Material UI's contained Button component with elevation.
================================================================= */
/* 16a. Button container — spacing above */
.login-button-box {
margin-top: 8px !important; /* space between last input and button */
width: 100% !important;
}
/* 16b. Inner div wrapper — force full width (Ant Design nests a div) */
.login-button-box > div {
width: 100% !important;
}
/* 16c. Button itself — color, size, shadow */
.login-button-box .ant-btn,
.login-form .ant-btn-primary {
background-color: #1976d2 !important; /* button color (MUI primary blue) */
border-color: #1976d2 !important; /* border matches background */
border-radius: 4px !important; /* corner radius */
height: 42px !important; /* button height */
font-size: 0.9375rem !important; /* 15px button text */
font-weight: 500 !important; /* medium weight */
width: 100% !important; /* full width, same as inputs */
max-width: 100% !important;
display: block !important;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12) !important; /* MUI elevation 2 */
}
/* 16d. Button hover state — slightly darker blue */
.login-button-box .ant-btn:hover,
.login-form .ant-btn-primary:hover {
background-color: #1565c0 !important; /* darker blue on hover */
border-color: #1565c0 !important;
}
/* =================================================================
18. MFA VERIFY PAGE — email OTP verification after password login
-----------------------------------------------------------------
When MFA is required, Casdoor renders MfaAuthVerifyForm inside
.login-panel > .login-form. We hide ALL of Casdoor's MFA content
and overlay our own UI (.babe-mfa-ui) built via JS.
================================================================= */
/* 18a. (Casdoor MFA content is hidden via JS style.display='none') */
/* 18b. Keep .babe-mfa-ui visible */
.babe-mfa-ui {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
max-width: 480px !important;
margin: 0 auto !important;
}
/* 18c. MFA title — aligned with OTP boxes */
.babe-mfa-ui h2 {
font-size: 1.25rem !important;
font-weight: 500 !important;
color: rgba(0, 0, 0, 0.87) !important;
margin: 0 0 8px 0 !important;
text-align: left !important;
width: 328px !important;
}
/* 18d. MFA subtitle — aligned with OTP boxes */
.babe-mfa-ui .babe-mfa-subtitle {
font-size: 0.875rem !important;
color: rgba(0, 0, 0, 0.54) !important;
margin-bottom: 20px !important;
text-align: left !important;
width: 328px !important;
}
/* 18e. OTP boxes container */
.babe-otp-container {
display: flex !important;
gap: 8px !important;
justify-content: center !important;
margin-bottom: 16px !important;
width: 100% !important;
}
/* 18f. Individual OTP box */
.babe-otp-box {
width: 48px !important;
height: 48px !important;
border: 1px solid rgba(0,0,0,0.23) !important;
border-radius: 8px !important;
text-align: center !important;
font-size: 1.25rem !important;
font-weight: 500 !important;
background: #fff !important;
outline: none !important;
caret-color: #1976d2 !important;
box-sizing: border-box !important;
padding: 0 !important;
}
.babe-otp-box:focus {
border-color: #1976d2 !important;
border-width: 2px !important;
box-shadow: none !important;
}
/* 18g. Confirm button — match OTP boxes width: (6*48)+(5*8)=328px */
.babe-mfa-confirm {
background-color: #1976d2 !important;
border: none !important;
border-color: #1976d2 !important;
border-radius: 4px !important;
height: 42px !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
width: 328px !important;
color: #fff !important;
cursor: pointer !important;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12) !important;
}
.babe-mfa-confirm:hover {
background-color: #1565c0 !important;
}
/* 18g2. Error message */
.babe-mfa-error {
color: #d32f2f !important;
font-size: 0.875rem !important;
text-align: center !important;
margin-bottom: 12px !important;
min-height: 0 !important;
}
/* 18h. Links */
.babe-mfa-links {
text-align: center !important;
margin-top: 16px !important;
width: 100% !important;
}
.babe-mfa-links a {
display: block !important;
margin-bottom: 8px !important;
font-size: 0.875rem !important;
text-decoration: none !important;
cursor: pointer !important;
}
.babe-mfa-resend { color: #1976d2 !important; }
.babe-mfa-resend-disabled { color: rgba(0, 0, 0, 0.38) !important; cursor: not-allowed !important; pointer-events: none !important; }
.babe-mfa-back { color: rgba(0, 0, 0, 0.87) !important; }
/* =================================================================
17. RESPONSIVE — mobile adjustments (screens <= 600px)
-----------------------------------------------------------------
On small screens:
- Panel goes full width with side padding
- Logos shrink slightly
- Input height reduces
Adjust the @media breakpoint (600px) to change when mobile
styles kick in.
================================================================= */
@media (max-width: 600px) {
/* 17a. Keep horizontal centering on small screens */
.loginBackground,
.login-content {
justify-content: center !important;
align-items: center !important;
}
/* 17b. Background — same top-start alignment, keep side gutters */
.loginBackground {
align-items: flex-start !important;
padding-top: 0 !important;
padding-left: 16px !important; /* mobile side gutter */
padding-right: 16px !important; /* mobile side gutter */
}
/* 17c. Content wrapper — same top offset on mobile */
.login-content {
align-items: flex-start !important;
padding-top: 120px !important; /* same vertical offset as desktop — adjust if needed */
}
/* 17d. Panel — full width with inner padding */
.login-panel {
width: 100% !important;
max-width: 100% !important;
padding: 0 24px !important; /* inner padding on mobile */
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* 17e. All form children — fill full panel width on mobile */
.login-logo-box,
.login-form,
.login-forget-password,
.login-button-box {
width: 100% !important;
max-width: 100% !important;
}
/* 17f. Reset any transforms on mobile */
.login-content { transform: none !important; }
/* 17g. Smaller animated GIF logo on mobile */
.login-logo-box a::before { width: 90px !important; height: 74px !important; }
/* 17h. Smaller SVG logo on mobile, less bottom margin */
.login-logo-box a::after { width: 120px !important; height: 46px !important; margin-bottom: 28px !important; }
/* 17i. Slightly shorter inputs on mobile */
.login-form .ant-input-affix-wrapper { height: 50px !important; }
/* 17j. Forgot password page — mobile */
.forget-content { padding-top: 80px !important; }
.babe-forget-logo img:first-child { width: 90px !important; height: 73px !important; }
.babe-forget-logo img:last-child { width: 120px !important; height: 46px !important; }
/* 17k. Forget OTP boxes — keep full-width stretch on mobile */
.forget-content .babe-forget-otp-container {
gap: 8px !important;
}
.forget-content .babe-forget-otp-container .babe-otp-box {
height: 48px !important;
font-size: 1rem !important;
}
/* 17l. Forget steps — smaller labels on mobile */
.forget-content .ant-steps-item-title {
font-size: 0.8125rem !important;
}
/* 17m. Allow wrapped subtitle/step labels on narrow screens */
.forget-content .babe-forget-otp-subtitle,
.forget-content .ant-steps-item-title {
white-space: normal !important;
word-break: keep-all !important;
line-height: 1.35 !important;
}
}
/* =================================================================
18. FIT-TO-VIEWPORT — no-scroll contract for short viewports
-----------------------------------------------------------------
The login/forget layout is a fixed design. On short viewports
(e.g. 150% browser zoom on a 1080p screen → ~720px CSS height)
babe-login.js uniformly scales the content block (.login-panel /
.forget-content) down so it fits the available height — the layout
is preserved exactly, just smaller, and the page never scrolls.
This rule enforces that no-scroll contract on both pages; the
transition smooths the scale change on resize/zoom.
================================================================= */
body:has(.loginBackground),
body:has(.forget-content) {
overflow: hidden !important;
}
.login-panel,
.forget-content {
transition: transform 0.12s ease-out !important;
}
/* =================================================================
19. FORGOT PASSWORD PAGE — /forget route
-----------------------------------------------------------------
Casdoor renders .forget-content as the sole card container.
Default style: white bg, border-radius:7px, box-shadow, padding.
We strip the card look and match the Babe login aesthetic.
Logo is injected via JS as .babe-forget-logo.
================================================================= */
/* 19a. Strip card styling — transparent, no shadow */
.forget-content {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 auto !important;
padding: 120px 16px 20px !important;
max-width: 480px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* 19a2. Strip all nested containers — no card look anywhere */
.forget-content div {
box-shadow: none !important;
}
/* 19a3. Reduce the form area top spacing (Casdoor sets inline marginTop) */
.forget-content > .ant-row > .ant-col > div[style*="display: flex"][style*="justify-content: center"],
.forget-content > .ant-row > .ant-col > div[style*="display:flex"] {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 19b. Page body background */
body:has(.forget-content) {
background: #f5f5f5 !important;
}
/* 19c. Babe logo container (injected via JS) */
.babe-forget-logo {
text-align: center !important;
margin-bottom: 0 !important;
}
/* 19d. Hide the back arrow button */
.forget-content .ant-btn-text:has(svg),
.forget-content > .ant-row:first-of-type .ant-btn[type="button"] {
display: none !important;
}
/* 19e. Hide the Casdoor built-in logo (replaced by .babe-forget-logo) */
.forget-content img:not(.babe-forget-logo img) {
display: none !important;
}
/* 19f. Reduce Casdoor's 80px margin on logo/title areas */
.forget-content div[style*="marginTop"] {
margin-top: 16px !important;
}
/* 19f2. Collapse the div containing the hidden logo */
.forget-content div[style*="margin-top"][style*="margin-bottom"][style*="text-align: center"]:has(.panel-logo) {
margin: 0 !important;
padding: 0 !important;
height: 30px !important;
overflow: hidden !important;
}
/* 19g. Title — centered (inline style patched to 25px in JS) */
.forget-content .babe-forget-title {
font-size: 25px !important;
font-weight: 500 !important;
color: rgba(0, 0, 0, 0.87) !important;
text-align: center !important;
}
/* 19h. Steps indicator — align icons, labels, and connector rails (Ant Design 5) */
.forget-content .ant-steps,
.forget-content .ant-steps[style] {
margin: 24px auto !important;
width: 80% !important;
max-width: 358px !important;
box-sizing: border-box !important;
}
.forget-content .ant-steps.ant-steps-horizontal {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
}
.forget-content .ant-steps-item {
flex: 1 1 0 !important;
min-width: 0 !important;
margin: 0 !important;
padding-inline-start: 0 !important;
position: relative !important;
}
.forget-content .ant-steps-item-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
width: 100% !important;
position: relative !important;
z-index: 1 !important;
}
.forget-content .ant-steps-item-icon {
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
flex-shrink: 0 !important;
margin: 0 !important;
border-radius: 50% !important;
border: 1px solid rgba(0, 0, 0, 0.25) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
box-sizing: border-box !important;
position: relative !important;
z-index: 1 !important;
background: #f5f5f5 !important;
}
.forget-content .ant-steps-item-icon .anticon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 16px !important;
line-height: 1 !important;
}
.forget-content .ant-steps-item-icon .anticon svg {
display: block !important;
}
.forget-content .ant-steps-item-section {
flex: 0 0 auto !important;
width: 100% !important;
min-width: 0 !important;
overflow: visible !important;
}
.forget-content .ant-steps-item-header {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
min-height: auto !important;
}
.forget-content .ant-steps-item-title {
flex-shrink: 0 !important;
font-size: 0.875rem !important;
line-height: 1.25 !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
white-space: nowrap !important;
text-align: center !important;
}
.forget-content .ant-steps-item-rail {
display: none !important;
}
/* Even connector lines between step icons */
.forget-content .ant-steps-item:not(:last-child)::before {
content: '' !important;
position: absolute !important;
top: 16px !important;
left: calc(50% + 16px) !important;
width: calc(100% - 32px) !important;
height: 1px !important;
background: rgba(0, 0, 0, 0.15) !important;
z-index: 0 !important;
pointer-events: none !important;
}
.forget-content .ant-steps-item-finish:not(:last-child)::before {
background: #1976d2 !important;
}
.forget-content .ant-steps-item-process:not(:last-child)::before,
.forget-content .ant-steps-item-wait:not(:last-child)::before {
background: rgba(0, 0, 0, 0.15) !important;
}
/* 19h1. Active step — filled circle with white icon */
.forget-content .ant-steps-item-process .ant-steps-item-icon {
background-color: #1976d2 !important;
border-color: #1976d2 !important;
color: #fff !important;
}
.forget-content .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon,
.forget-content .ant-steps-item-process .ant-steps-item-icon .anticon {
color: #fff !important;
font-size: 16px !important;
}
.forget-content .ant-steps-item-process .ant-steps-item-icon svg {
fill: currentColor !important;
color: #fff !important;
}
.forget-content .ant-steps-item-process .ant-steps-item-title {
color: #1976d2 !important;
}
/* 19h2. Completed step — blue border, blue icon */
.forget-content .ant-steps-item-finish .ant-steps-item-icon {
border-color: #1976d2 !important;
background: #f5f5f5 !important;
color: #1976d2 !important;
}
.forget-content .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon,
.forget-content .ant-steps-item-finish .ant-steps-item-icon .anticon {
color: #1976d2 !important;
}
.forget-content .ant-steps-item-finish .ant-steps-item-icon svg {
fill: currentColor !important;
color: #1976d2 !important;
}
.forget-content .ant-steps-item-finish .ant-steps-item-title {
color: #1976d2 !important;
}
/* 19h3. Waiting step — grey */
.forget-content .ant-steps-item-wait .ant-steps-item-icon {
border-color: rgba(0,0,0,0.25) !important;
background: #f5f5f5 !important;
color: rgba(0, 0, 0, 0.25) !important;
}
.forget-content .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon,
.forget-content .ant-steps-item-wait .ant-steps-item-icon .anticon {
color: rgba(0, 0, 0, 0.25) !important;
}
.forget-content .ant-steps-item-wait .ant-steps-item-icon svg {
fill: currentColor !important;
color: rgba(0, 0, 0, 0.25) !important;
}
.forget-content .ant-steps-item-wait .ant-steps-item-title {
color: rgba(0, 0, 0, 0.38) !important;
}
/* Legacy tail connector — hide if present */
.forget-content .ant-steps-item-tail {
display: none !important;
}
/* 19g. Input fields — MUI outlined style (match login) */
/* Style the wrapper when it exists (input has prefix/suffix) */
.forget-content .ant-input-affix-wrapper {
border: 1px solid rgba(0,0,0,0.23) !important;
border-radius: 4px !important;
padding: 10px 16px !important;
height: 56px !important;
background: #fff !important;
font-size: 1rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Inner input inside wrapper — no border (wrapper handles it) */
.forget-content .ant-input-affix-wrapper .ant-input {
border: none !important;
padding: 0 !important;
height: auto !important;
background: transparent !important;
box-shadow: none !important;
}
/* Standalone input (no wrapper) */
.forget-content .ant-input:not(.ant-input-affix-wrapper .ant-input) {
border: 1px solid rgba(0,0,0,0.23) !important;
border-radius: 4px !important;
padding: 10px 16px !important;
height: 56px !important;
background: #fff !important;
font-size: 1rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
.forget-content .ant-input-affix-wrapper:hover,
.forget-content .ant-input:not(.ant-input-affix-wrapper .ant-input):hover {
border-color: rgba(0,0,0,0.87) !important;
}
.forget-content .ant-input-affix-wrapper-focused,
.forget-content .ant-input:not(.ant-input-affix-wrapper .ant-input):focus {
border-color: #1976d2 !important;
border-width: 2px !important;
box-shadow: none !important;
}
.forget-content .ant-input::placeholder {
color: rgba(0, 0, 0, 0.38) !important;
opacity: 1 !important;
}
/* 19h. Verification code input group */
.forget-content .verification-code-input { width: 100% !important; }
.forget-content .verification-code-input .ant-input-group { display: flex !important; }
.forget-content .verification-code-input .ant-input { flex: 1 !important; }
.forget-content .verification-code-input .ant-input-group-addon {
background: transparent !important;
border: none !important;
padding: 0 0 0 8px !important;
}
/* 19h1. Forget OTP step — hide native input+button row, show 6-box UI */
.forget-content [data-babe-otp-patched="true"] {
display: none !important;
}
.forget-content .babe-forget-otp-ui {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
margin-bottom: 0 !important;
}
.forget-content .babe-forget-otp-subtitle {
font-size: 0.75rem !important;
color: rgba(0, 0, 0, 0.54) !important;
margin: 0 0 20px !important;
text-align: center !important;
width: 100% !important;
white-space: normal !important;
word-break: keep-all !important;
line-height: 1.4 !important;
}
.forget-content .babe-forget-otp-container {
display: flex !important;
gap: 10px !important;
justify-content: stretch !important;
margin-bottom: 16px !important;
width: 100% !important;
}
.forget-content .babe-forget-otp-container .babe-otp-box {
flex: 1 1 0 !important;
min-width: 0 !important;
width: auto !important;
height: 52px !important;
font-size: 1.125rem !important;
}
.forget-content .babe-forget-links {
margin-top: 16px !important;
}
/* 19i. Send code button — outlined style (hidden once OTP boxes are patched) */
.forget-content .verification-code-input .ant-btn {
height: 56px !important;
border-radius: 4px !important;
border: 1px solid #1976d2 !important;
color: #1976d2 !important;
background: transparent !important;
font-size: 0.875rem !important;
white-space: nowrap !important;
}
/* 19j. Reduce gap between input and button, and input top margin */
.forget-content .ant-form-item {
margin-bottom: 8px !important;
margin-top: 0 !important;
}
.forget-content .ant-row:has(.ant-input-affix-wrapper),
.forget-content .ant-row:has(.ant-input) {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 19j1. Hide password-rule popover on forget reset step (Casdoor PasswordChecker) */
body:has(.forget-content) .ant-popover {
display: none !important;
}
/* 19j2. Remove extra Ant Design spacing around OTP row and submit button row */
.forget-content .ant-form-item:has([data-babe-otp-patched]) {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.forget-content .ant-form-item:has(.ant-btn-primary:not(.verification-code-input .ant-btn)) {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 19k. Submit / Next button — MUI contained style */
.forget-content .ant-btn-primary:not(.verification-code-input .ant-btn) {
background-color: #1976d2 !important;
border-color: #1976d2 !important;
border-radius: 4px !important;
height: 42px !important;
font-size: 0.9375rem !important;
font-weight: 500 !important;
width: 100% !important;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px rgba(0,0,0,.14), 0 1px 5px rgba(0,0,0,.12) !important;
}
.forget-content .ant-btn-primary:hover:not(.verification-code-input .ant-btn) {
background-color: #1565c0 !important;
border-color: #1565c0 !important;
}
/* 19j2. Step 3 — disabled (+ loading) submit during set-password / redirect */
.forget-content .ant-btn-primary.ant-btn-disabled:not(.verification-code-input .ant-btn) {
opacity: 0.55 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.forget-content .ant-btn-primary.babe-forget-btn-loading:not(.verification-code-input .ant-btn) {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
}
.forget-content .babe-forget-btn-spinner {
display: inline-flex !important;
align-items: center !important;
line-height: 0 !important;
}
.forget-content .babe-forget-btn-spinner .anticon-loading {
display: inline-block !important;
font-size: 14px !important;
line-height: 1 !important;
animation: none !important;
}
.forget-content .babe-forget-btn-spinner .anticon-loading svg {
animation: none !important;
}
.forget-content .babe-forget-btn-spinner .anticon-loading svg {
width: 14px !important;
height: 14px !important;
}
.forget-content .ant-btn-primary.ant-btn-disabled .babe-forget-btn-spinner .anticon-loading,
.forget-content .ant-btn-primary.ant-btn-disabled .babe-forget-btn-spinner .anticon-loading svg {
color: rgba(25, 118, 210, 0.85) !important;
fill: currentColor !important;
}
/* 19k. Hide user icon prefix in input */
.forget-content .ant-input-prefix {
display: none !important;
}
.ant-col > div:has(form) {
margin-top: 0 !important;
padding: 20px 40px !important;
border: solid 1px #ddd !important;
}
body:has(.forget-content) .ant-col > div:has(form) {
width: 80% !important;
max-width: 358px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 28px !important;
padding-right: 28px !important;
box-sizing: border-box !important;
}
/* 19l. Hide GitHub corner on forget page */
body:has(.forget-content) .github-corner { display: none !important; }
/* 19n. Hide dropdown arrow on email selector in OTP step */
.forget-content .ant-select-suffix { display: none !important; }
/* 19m. Back-to-login link on forget page */
.babe-forget-login-link {
text-align: center !important;
margin-top: 16px !important;
width: 100% !important;
}
.babe-forget-login-link a {
color: #1976d2 !important;
font-size: 0.875rem !important;
text-decoration: underline !important;
}
/* 19m1. Hide step-1 footer link on OTP step (Casdoor renders its own inline link) */
.forget-content:has(.verification-code-input) .babe-forget-login-link {
display: none !important;
}