Cupertino · Sign-in theme
Cupertino
An airy grey page with a soft white card, large rounded fields, a segmented control for the sign-in methods and a tall button, with the system font of the visitor's device. CSS only, so organization admins can install it.
Verified by CasdoorLightMinimalCSS only
What it sets
| Theme | default |
|---|---|
| Border radius | 12px |
| Form position | Center |
| Custom CSS | Yes |
| Custom CSS Mobile | Yes |
Everything is on the application's UI Customization tab in Casdoor, so you can keep adjusting it after applying the theme.
Apply it to an application
- Enter the application below, adjust the theme's settings, and copy the JSON.
- In the Casdoor console, open Applications, edit that application, click Import JSON at the top, paste the JSON and click OK.
- Click Save. The sign-in page uses the theme from the next visit.
{
"name": "<application name>",
"organization": "<organization>",
"themeData": {
"themeType": "default",
"colorPrimary": "#0071e3",
"borderRadius": 12,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formCss": "<style>\n.login-background {\n color-scheme: light;\n --background: 240 11% 96%;\n --foreground: 240 3% 12%;\n --card: 0 0% 100%;\n --card-foreground: 240 3% 12%;\n --muted: 240 6% 92%;\n --muted-foreground: 240 2% 44%;\n --accent: 240 6% 94%;\n --accent-foreground: 240 3% 12%;\n --border: 240 5% 84%;\n --input: 240 5% 84%;\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n.login-background {\n background: #f5f5f7;\n}\n.login-content > div {\n max-width: 420px;\n}\n.login-panel {\n padding: 44px 40px 16px;\n border: none;\n border-radius: 22px;\n background: #ffffff;\n box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);\n}\n.login-logo-box {\n margin-bottom: 32px;\n}\n.login-logo-box img {\n max-height: 64px;\n}\n.signin-methods > div {\n height: 36px;\n padding: 2px;\n border-radius: 9px;\n background: #e8e8ed;\n}\n.signin-methods [role='tab'][data-state='active'] {\n border-radius: 7px;\n background: #ffffff !important;\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04) !important;\n}\n.login-form label {\n color: #6e6e73;\n font-size: 13px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 52px;\n padding: 0 16px;\n border: 1px solid #d2d2d7;\n border-radius: 12px;\n background: #ffffff;\n font-size: 17px;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border-color: #0071e3;\n box-shadow: 0 0 0 4px color-mix(in srgb, #0071e3 22%, transparent);\n}\n.login-form [role='checkbox'] {\n border-color: #86868b;\n border-radius: 5px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #0071e3;\n border-color: #0071e3;\n color: #ffffff;\n}\n.login-form a {\n color: #0071e3;\n font-weight: 400;\n}\n.login-form .login-button {\n height: 48px;\n border-radius: 12px;\n background: #0071e3;\n color: #ffffff;\n font-size: 17px;\n font-weight: 400;\n box-shadow: none;\n}\n.login-form .login-button:hover {\n background: #0071e3;\n opacity: 0.88;\n}\n#footer {\n color: #86868b;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n.login-background {\n color-scheme: light;\n --background: 240 11% 96%;\n --foreground: 240 3% 12%;\n --card: 0 0% 100%;\n --card-foreground: 240 3% 12%;\n --muted: 240 6% 92%;\n --muted-foreground: 240 2% 44%;\n --accent: 240 6% 94%;\n --accent-foreground: 240 3% 12%;\n --border: 240 5% 84%;\n --input: 240 5% 84%;\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;\n -webkit-font-smoothing: antialiased;\n}\n.login-background {\n background: #ffffff;\n}\n.login-panel {\n border: none;\n background: #ffffff;\n box-shadow: none;\n}\n.login-logo-box img {\n max-height: 56px;\n}\n.signin-methods > div {\n height: 36px;\n padding: 2px;\n border-radius: 9px;\n background: #e8e8ed;\n}\n.signin-methods [role='tab'][data-state='active'] {\n border-radius: 7px;\n background: #ffffff !important;\n box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04) !important;\n}\n.login-form label {\n color: #6e6e73;\n font-size: 13px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 52px;\n padding: 0 16px;\n border: 1px solid #d2d2d7;\n border-radius: 12px;\n background: #ffffff;\n font-size: 17px;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border-color: #0071e3;\n box-shadow: 0 0 0 4px color-mix(in srgb, #0071e3 22%, transparent);\n}\n.login-form [role='checkbox'] {\n border-color: #86868b;\n border-radius: 5px;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #0071e3;\n border-color: #0071e3;\n color: #ffffff;\n}\n.login-form a {\n color: #0071e3;\n font-weight: 400;\n}\n.login-form .login-button {\n height: 48px;\n border-radius: 12px;\n background: #0071e3;\n color: #ffffff;\n font-size: 17px;\n font-weight: 400;\n box-shadow: none;\n}\n.login-form .login-button:hover {\n background: #0071e3;\n opacity: 0.88;\n}\n#footer {\n color: #86868b;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>"
}More sign-in themes
View all
Aurora
Sign-in themeA pastel mesh of color tinted by your accent behind a frosted glass card, with soft rounded fields and a gradient button. CSS only, so organization admins can install it.
LightGlassGradient
Backdrop
Sign-in themeYour own picture behind the whole page, dimmed a little, with a frosted glass card on top. It comes with a dusk mountain scene; give it any image address to use yours. Organization admins can install it.
DarkBackground imageGlass
Bare
Sign-in themeNothing but the form: no card, no background, a small left-aligned logo, quiet text tabs, hairline fields and a round button, with plenty of white space. CSS only, so organization admins can install it.
LightMinimalNo card