Retro · Sign-in theme
Retro
A 90s desktop: a grey bevelled window with a title bar on a teal background, sunken fields, tabbed dialogs and a taskbar along the bottom. CSS only, so organization admins can install it.
Verified by CasdoorLightRetroPlayfulCSS only
What it sets
| Theme | default |
|---|---|
| Border radius | 0px |
| 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": "#000080",
"borderRadius": 0,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formCss": "<style>\n.login-background {\n color-scheme: light;\n --background: 180 100% 25%;\n --foreground: 0 0% 0%;\n --card: 0 0% 75%;\n --card-foreground: 0 0% 0%;\n --popover: 0 0% 75%;\n --popover-foreground: 0 0% 0%;\n --muted: 0 0% 75%;\n --muted-foreground: 0 0% 0%;\n --accent: 0 0% 75%;\n --accent-foreground: 0 0% 0%;\n --border: 0 0% 50%;\n --input: 0 0% 50%;\n --ring: 0 0% 0%;\n font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, Verdana, sans-serif;\n background: #008080;\n}\n.login-content > div {\n max-width: 420px;\n}\n\n.login-panel {\n position: relative;\n padding: 3px;\n border-radius: 0;\n background: #c0c0c0;\n border: 2px solid;\n border-color: #dfdfdf #000000 #000000 #dfdfdf;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, 2px 2px 0 rgba(0, 0, 0, 0.35);\n}\n.login-background > div:first-of-type button {\n color: #ffffff;\n}\n.login-form {\n padding: 0 18px 18px;\n font-size: 13px;\n}\n.login-form::before {\n content: 'Sign In';\n display: block;\n margin: 0 -18px 18px;\n padding: 4px 6px;\n background: linear-gradient(90deg, #000080 0%, color-mix(in srgb, #000080 40%, #1084d0) 100%);\n color: #ffffff;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.02em;\n}\n.login-panel::after {\n content: '✕';\n position: absolute;\n top: 6px;\n right: 6px;\n width: 18px;\n height: 16px;\n background: #c0c0c0;\n color: #000000;\n font-size: 10px;\n font-weight: 700;\n line-height: 12px;\n text-align: center;\n border: 2px solid;\n border-color: #ffffff #000000 #000000 #ffffff;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;\n}\n.login-logo-box {\n margin-bottom: 16px;\n}\n.signin-methods > div {\n height: auto;\n padding: 0;\n border: none;\n border-bottom: 2px solid #ffffff;\n border-radius: 0;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n justify-content: flex-start;\n gap: 0;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n margin-bottom: -2px;\n padding: 3px 10px;\n border: 2px solid;\n border-color: #ffffff #000000 transparent #ffffff;\n border-radius: 4px 4px 0 0;\n background: #c0c0c0 !important;\n color: #000000;\n font-size: 12px;\n font-weight: 400;\n box-shadow: inset -1px 0 #808080 !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n position: relative;\n z-index: 1;\n margin-top: -3px;\n padding-bottom: 6px;\n border-bottom-color: #c0c0c0;\n}\n.login-form label {\n color: #000000;\n font-size: 13px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 30px;\n min-height: 30px;\n border-radius: 0;\n background: #ffffff;\n color: #000000;\n font-size: 13px;\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: none;\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form [role='checkbox'] {\n width: 15px;\n height: 15px;\n border-radius: 0;\n background: #ffffff;\n color: #000000;\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffffff;\n color: #000000;\n}\n.login-form a {\n color: #0000ee;\n font-weight: 400;\n text-decoration: underline;\n}\n.login-form .login-button-box {\n display: flex;\n justify-content: flex-end;\n}\n.login-form .login-button {\n width: auto;\n min-width: 88px;\n height: 28px;\n min-height: 28px;\n padding: 0 16px;\n border-radius: 0;\n background: #c0c0c0;\n color: #000000;\n font-size: 13px;\n font-weight: 400;\n outline: 1px solid #000000;\n outline-offset: 0;\n border: 2px solid;\n border-color: #ffffff #000000 #000000 #ffffff;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;\n}\n.login-form .login-button:hover {\n background: #c0c0c0;\n}\n.login-form .login-button:active {\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form .login-signup-link {\n justify-content: flex-start;\n color: #000000;\n}\n#footer {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 34px;\n padding: 0 10px 0 86px;\n border-top: 2px solid #ffffff;\n background: #c0c0c0;\n color: #000000;\n box-shadow: inset 0 1px #dfdfdf;\n}\n#footer::before {\n content: '❖ Start';\n position: absolute;\n left: 4px;\n top: 4px;\n height: 24px;\n padding: 0 8px;\n background: #c0c0c0;\n color: #000000;\n font-size: 13px;\n font-weight: 700;\n line-height: 20px;\n border: 2px solid;\n border-color: #ffffff #000000 #000000 #ffffff;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;\n}\n#footer > span {\n height: 24px;\n padding: 0 10px;\n border: 1px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n}\n.login-content {\n padding-bottom: 64px;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n.login-background {\n color-scheme: light;\n --background: 180 100% 25%;\n --foreground: 0 0% 0%;\n --card: 0 0% 75%;\n --card-foreground: 0 0% 0%;\n --popover: 0 0% 75%;\n --popover-foreground: 0 0% 0%;\n --muted: 0 0% 75%;\n --muted-foreground: 0 0% 0%;\n --accent: 0 0% 75%;\n --accent-foreground: 0 0% 0%;\n --border: 0 0% 50%;\n --input: 0 0% 50%;\n --ring: 0 0% 0%;\n font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, Verdana, sans-serif;\n background: #008080;\n}\n.login-content {\n padding-left: 10px;\n padding-right: 10px;\n}\n.login-background .login-content .login-panel.login-panel-bleed,\n.login-panel {\n position: relative;\n padding: 3px;\n border-radius: 0;\n background: #c0c0c0;\n border: 2px solid;\n border-color: #dfdfdf #000000 #000000 #dfdfdf;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #ffffff, 2px 2px 0 rgba(0, 0, 0, 0.35);\n}\n.login-background > div:first-of-type button {\n color: #ffffff;\n}\n.login-form {\n padding: 0 18px 18px;\n font-size: 13px;\n}\n.login-form::before {\n content: 'Sign In';\n display: block;\n margin: 0 -18px 18px;\n padding: 4px 6px;\n background: linear-gradient(90deg, #000080 0%, color-mix(in srgb, #000080 40%, #1084d0) 100%);\n color: #ffffff;\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.02em;\n}\n.login-panel::after {\n content: '✕';\n position: absolute;\n top: 6px;\n right: 6px;\n width: 18px;\n height: 16px;\n background: #c0c0c0;\n color: #000000;\n font-size: 10px;\n font-weight: 700;\n line-height: 12px;\n text-align: center;\n border: 2px solid;\n border-color: #ffffff #000000 #000000 #ffffff;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;\n}\n.login-logo-box {\n margin-bottom: 16px;\n}\n.signin-methods > div {\n height: auto;\n padding: 0;\n border: none;\n border-bottom: 2px solid #ffffff;\n border-radius: 0;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n justify-content: flex-start;\n gap: 0;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n margin-bottom: -2px;\n padding: 3px 10px;\n border: 2px solid;\n border-color: #ffffff #000000 transparent #ffffff;\n border-radius: 4px 4px 0 0;\n background: #c0c0c0 !important;\n color: #000000;\n font-size: 12px;\n font-weight: 400;\n box-shadow: inset -1px 0 #808080 !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n position: relative;\n z-index: 1;\n margin-top: -3px;\n padding-bottom: 6px;\n border-bottom-color: #c0c0c0;\n}\n.login-form label {\n color: #000000;\n font-size: 13px;\n font-weight: 400;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 30px;\n min-height: 30px;\n border-radius: 0;\n background: #ffffff;\n color: #000000;\n font-size: 13px;\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: none;\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form [role='checkbox'] {\n width: 15px;\n height: 15px;\n border-radius: 0;\n background: #ffffff;\n color: #000000;\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffffff;\n color: #000000;\n}\n.login-form a {\n color: #0000ee;\n font-weight: 400;\n text-decoration: underline;\n}\n.login-form .login-button-box {\n display: flex;\n justify-content: flex-end;\n}\n.login-form .login-button {\n width: auto;\n min-width: 88px;\n height: 28px;\n min-height: 28px;\n padding: 0 16px;\n border-radius: 0;\n background: #c0c0c0;\n color: #000000;\n font-size: 13px;\n font-weight: 400;\n outline: 1px solid #000000;\n outline-offset: 0;\n border: 2px solid;\n border-color: #ffffff #000000 #000000 #ffffff;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;\n}\n.login-form .login-button:hover {\n background: #c0c0c0;\n}\n.login-form .login-button:active {\n border: 2px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n box-shadow: inset 1px 1px #000000, inset -1px -1px #dfdfdf;\n}\n.login-form .login-signup-link {\n justify-content: flex-start;\n color: #000000;\n}\n#footer {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 3;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n height: 34px;\n padding: 0 10px 0 86px;\n border-top: 2px solid #ffffff;\n background: #c0c0c0;\n color: #000000;\n box-shadow: inset 0 1px #dfdfdf;\n}\n#footer::before {\n content: '❖ Start';\n position: absolute;\n left: 4px;\n top: 4px;\n height: 24px;\n padding: 0 8px;\n background: #c0c0c0;\n color: #000000;\n font-size: 13px;\n font-weight: 700;\n line-height: 20px;\n border: 2px solid;\n border-color: #ffffff #000000 #000000 #ffffff;\n box-shadow: inset -1px -1px #808080, inset 1px 1px #dfdfdf;\n}\n#footer > span {\n height: 24px;\n padding: 0 10px;\n border: 1px solid;\n border-color: #808080 #ffffff #ffffff #808080;\n}\n.login-content {\n padding-bottom: 64px;\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