Blueprint · Sign-in theme
Blueprint
A technical drawing: white lines on blueprint-blue grid paper, a framed form labelled like a figure, dashed fields and a drafting typeface. It loads the Share Tech Mono font from Google Fonts. Organization admins can install it.
Verified by CasdoorDarkTechnicalMonospaceWeb font
What it sets
| Theme | dark |
|---|---|
| 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": "dark",
"colorPrimary": "#ffffff",
"borderRadius": 0,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formCss": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');\n.login-background {\n color-scheme: dark;\n --background: 212 79% 28%;\n --foreground: 0 0% 100%;\n --card: 212 79% 28%;\n --card-foreground: 0 0% 100%;\n --popover: 212 79% 24%;\n --popover-foreground: 0 0% 100%;\n --muted: 212 70% 34%;\n --muted-foreground: 210 60% 88%;\n --accent: 212 70% 36%;\n --accent-foreground: 0 0% 100%;\n --border: 210 60% 80%;\n --input: 210 60% 80%;\n --ring: 0 0% 100%;\n font-family: 'Share Tech Mono', ui-monospace, Consolas, Menlo, monospace;\n background-color: #0f4c81;\n background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);\n background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;\n background-position: -1px -1px;\n}\n.login-content > div {\n max-width: 440px;\n}\n.login-topbar button {\n color: #ffffff;\n}\n.login-panel {\n position: relative;\n overflow: visible;\n border: 1.5px solid rgba(255, 255, 255, 0.9);\n border-radius: 0;\n background: color-mix(in srgb, #0f4c81 92%, #000000);\n color: #ffffff;\n box-shadow: 0 0 0 6px color-mix(in srgb, #0f4c81 92%, #000000), 0 0 0 7px rgba(255, 255, 255, 0.45);\n}\n.login-panel::before {\n content: 'FIG. 1 SIGN-IN FORM';\n position: absolute;\n top: -9px;\n left: 18px;\n padding: 0 8px;\n background: color-mix(in srgb, #0f4c81 92%, #000000);\n color: #ffffff;\n font-size: 11px;\n letter-spacing: 0.14em;\n line-height: 16px;\n white-space: pre;\n}\n.login-panel::after {\n content: 'SCALE 1:1 REV A';\n position: absolute;\n right: 18px;\n bottom: -9px;\n padding: 0 8px;\n background: color-mix(in srgb, #0f4c81 92%, #000000);\n color: rgba(255, 255, 255, 0.85);\n font-size: 11px;\n letter-spacing: 0.14em;\n line-height: 16px;\n white-space: pre;\n}\n.login-logo-box img {\n filter: brightness(0) invert(1);\n}\n.signin-methods > div {\n border: 1px dashed rgba(255, 255, 255, 0.6);\n border-radius: 0;\n background: transparent;\n}\n.signin-methods [role='tab'] {\n border-radius: 0;\n color: rgba(255, 255, 255, 0.75);\n font-family: inherit;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: #ffffff !important;\n color: #0f4c81;\n box-shadow: none !important;\n}\n.login-form label {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n border: 1px dashed rgba(255, 255, 255, 0.75);\n border-radius: 0;\n background: rgba(255, 255, 255, 0.05);\n color: #ffffff;\n font-family: inherit;\n font-size: 15px;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: rgba(255, 255, 255, 0.5);\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border: 1px solid #ffffff;\n background: rgba(255, 255, 255, 0.1);\n box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);\n}\n.login-password button {\n color: #ffffff;\n}\n.login-form [role='checkbox'] {\n border: 1px solid #ffffff;\n border-radius: 0;\n background: transparent;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffffff;\n color: #0f4c81;\n}\n.login-form a {\n color: #ffffff;\n text-decoration: underline;\n text-decoration-style: dashed;\n text-underline-offset: 4px;\n}\n.login-form .login-button {\n height: 46px;\n border: none;\n border-radius: 0;\n background: #ffffff;\n color: #0f4c81;\n font-family: inherit;\n font-size: 15px;\n font-weight: 400;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n box-shadow: none;\n}\n.login-form .login-button:hover {\n background: rgba(255, 255, 255, 0.85);\n}\n.login-form .login-signup-link,\n.login-form .login-signup-link span,\n.login-form .login-forget-password label {\n color: rgba(255, 255, 255, 0.85);\n}\n#footer {\n color: rgba(255, 255, 255, 0.8);\n letter-spacing: 0.08em;\n}\n#footer img {\n filter: brightness(0) invert(1);\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');\n.login-background {\n color-scheme: dark;\n --background: 212 79% 28%;\n --foreground: 0 0% 100%;\n --card: 212 79% 28%;\n --card-foreground: 0 0% 100%;\n --popover: 212 79% 24%;\n --popover-foreground: 0 0% 100%;\n --muted: 212 70% 34%;\n --muted-foreground: 210 60% 88%;\n --accent: 212 70% 36%;\n --accent-foreground: 0 0% 100%;\n --border: 210 60% 80%;\n --input: 210 60% 80%;\n --ring: 0 0% 100%;\n font-family: 'Share Tech Mono', ui-monospace, Consolas, Menlo, monospace;\n background-color: #0f4c81;\n background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);\n background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;\n background-position: -1px -1px;\n}\n.login-content {\n padding-left: 14px;\n padding-right: 14px;\n}\n.login-background .login-content .login-panel.login-panel-bleed {\n padding-top: 28px;\n padding-bottom: 6px;\n border: 1.5px solid rgba(255, 255, 255, 0.9);\n background: color-mix(in srgb, #0f4c81 92%, #000000);\n}\n.login-topbar button {\n color: #ffffff;\n}\n.login-panel {\n position: relative;\n overflow: visible;\n border: 1.5px solid rgba(255, 255, 255, 0.9);\n border-radius: 0;\n background: color-mix(in srgb, #0f4c81 92%, #000000);\n color: #ffffff;\n box-shadow: 0 0 0 6px color-mix(in srgb, #0f4c81 92%, #000000), 0 0 0 7px rgba(255, 255, 255, 0.45);\n}\n.login-panel::before {\n content: 'FIG. 1 SIGN-IN FORM';\n position: absolute;\n top: -9px;\n left: 18px;\n padding: 0 8px;\n background: color-mix(in srgb, #0f4c81 92%, #000000);\n color: #ffffff;\n font-size: 11px;\n letter-spacing: 0.14em;\n line-height: 16px;\n white-space: pre;\n}\n.login-panel::after {\n content: 'SCALE 1:1 REV A';\n position: absolute;\n right: 18px;\n bottom: -9px;\n padding: 0 8px;\n background: color-mix(in srgb, #0f4c81 92%, #000000);\n color: rgba(255, 255, 255, 0.85);\n font-size: 11px;\n letter-spacing: 0.14em;\n line-height: 16px;\n white-space: pre;\n}\n.login-logo-box img {\n filter: brightness(0) invert(1);\n}\n.signin-methods > div {\n border: 1px dashed rgba(255, 255, 255, 0.6);\n border-radius: 0;\n background: transparent;\n}\n.signin-methods [role='tab'] {\n border-radius: 0;\n color: rgba(255, 255, 255, 0.75);\n font-family: inherit;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: #ffffff !important;\n color: #0f4c81;\n box-shadow: none !important;\n}\n.login-form label {\n color: #ffffff;\n font-size: 12px;\n font-weight: 400;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n border: 1px dashed rgba(255, 255, 255, 0.75);\n border-radius: 0;\n background: rgba(255, 255, 255, 0.05);\n color: #ffffff;\n font-family: inherit;\n font-size: 15px;\n box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: rgba(255, 255, 255, 0.5);\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n border: 1px solid #ffffff;\n background: rgba(255, 255, 255, 0.1);\n box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);\n}\n.login-password button {\n color: #ffffff;\n}\n.login-form [role='checkbox'] {\n border: 1px solid #ffffff;\n border-radius: 0;\n background: transparent;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffffff;\n color: #0f4c81;\n}\n.login-form a {\n color: #ffffff;\n text-decoration: underline;\n text-decoration-style: dashed;\n text-underline-offset: 4px;\n}\n.login-form .login-button {\n height: 46px;\n border: none;\n border-radius: 0;\n background: #ffffff;\n color: #0f4c81;\n font-family: inherit;\n font-size: 15px;\n font-weight: 400;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n box-shadow: none;\n}\n.login-form .login-button:hover {\n background: rgba(255, 255, 255, 0.85);\n}\n.login-form .login-signup-link,\n.login-form .login-signup-link span,\n.login-form .login-forget-password label {\n color: rgba(255, 255, 255, 0.85);\n}\n#footer {\n color: rgba(255, 255, 255, 0.8);\n letter-spacing: 0.08em;\n}\n#footer img {\n filter: brightness(0) invert(1);\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