Pixel · Sign-in theme
Pixel
An 8-bit game menu: a pixel font, stepped borders, a starry night sky, a blinking PRESS START and a chunky button that presses in. It loads the Press Start 2P font from Google Fonts. Organization admins can install it.
Verified by CasdoorDarkRetroPlayfulWeb 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": "#ffcd75",
"borderRadius": 0,
"isCompact": false,
"isEnabled": true
},
"formOffset": 2,
"formCss": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');\n.login-background {\n color-scheme: dark;\n --background: 233 28% 14%;\n --foreground: 0 0% 96%;\n --card: 229 46% 30%;\n --card-foreground: 0 0% 96%;\n --popover: 229 46% 30%;\n --popover-foreground: 0 0% 96%;\n --muted: 233 28% 20%;\n --muted-foreground: 220 30% 80%;\n --accent: 233 28% 24%;\n --accent-foreground: 0 0% 96%;\n --border: 0 0% 96%;\n --input: 0 0% 96%;\n --ring: 0 0% 96%;\n font-family: 'Press Start 2P', ui-monospace, 'Courier New', monospace;\n background-color: #1a1c2c;\n background-image: radial-gradient(#f4f4f4 1px, transparent 1.5px), radial-gradient(#94b0c2 1px, transparent 1.5px), radial-gradient(#f4f4f4 1.5px, transparent 2px);\n background-size: 170px 190px, 110px 130px, 290px 310px;\n background-position: 20px 30px, 70px 90px, 140px 60px;\n}\n@keyframes pixel-blink {\n 50% {\n opacity: 0;\n }\n}\n.login-content > div {\n max-width: 470px;\n}\n\n.login-panel {\n margin: 8px;\n width: calc(100% - 16px);\n border: none;\n border-radius: 0;\n background: #29366f;\n box-shadow: 0 -8px 0 0 #f4f4f4, 0 8px 0 0 #f4f4f4, -8px 0 0 0 #f4f4f4, 8px 0 0 0 #f4f4f4, 0 0 0 8px #1a1c2c, 12px 12px 0 8px rgba(0, 0, 0, 0.5);\n}\n.login-topbar button {\n color: #f4f4f4;\n}\n.login-form {\n font-size: 10px;\n line-height: 1.8;\n}\n.login-logo-box {\n flex-direction: column;\n align-items: center;\n}\n.login-logo-box::after {\n content: '- PRESS START -';\n margin-top: 18px;\n color: #ffcd75;\n font-size: 10px;\n animation: pixel-blink 1s steps(1) infinite;\n}\n.signin-methods > div {\n height: auto;\n padding: 2px;\n border: none;\n border-radius: 0;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n gap: 12px;\n overflow: visible;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n padding: 6px 8px;\n border-radius: 0;\n background: #1a1c2c !important;\n color: #94b0c2;\n font-family: inherit;\n font-size: 8px;\n box-shadow: 0 -2px 0 0 #566c86, 0 2px 0 0 #566c86, -2px 0 0 0 #566c86, 2px 0 0 0 #566c86 !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: #ffcd75 !important;\n color: #1a1c2c;\n box-shadow: 0 -2px 0 0 #f4f4f4, 0 2px 0 0 #f4f4f4, -2px 0 0 0 #f4f4f4, 2px 0 0 0 #f4f4f4 !important;\n}\n.login-form label {\n color: #f4f4f4;\n font-size: 10px;\n font-weight: 400;\n line-height: 1.8;\n text-transform: uppercase;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n margin: 4px;\n width: calc(100% - 8px);\n border: none;\n border-radius: 0;\n background: #1a1c2c;\n color: #f4f4f4;\n font-family: inherit;\n font-size: 11px;\n box-shadow: 0 -4px 0 0 #f4f4f4, 0 4px 0 0 #f4f4f4, -4px 0 0 0 #f4f4f4, 4px 0 0 0 #f4f4f4;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: #566c86;\n font-size: 8px;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: none;\n box-shadow: 0 -4px 0 0 #ffcd75, 0 4px 0 0 #ffcd75, -4px 0 0 0 #ffcd75, 4px 0 0 0 #ffcd75;\n}\n.login-password button {\n right: 6px;\n color: #94b0c2;\n}\n.login-form [role='checkbox'] {\n width: 14px;\n height: 14px;\n margin: 0 4px;\n border: none;\n border-radius: 0;\n background: #1a1c2c;\n box-shadow: 0 -2px 0 0 #f4f4f4, 0 2px 0 0 #f4f4f4, -2px 0 0 0 #f4f4f4, 2px 0 0 0 #f4f4f4;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffcd75;\n color: #1a1c2c;\n}\n.login-form a {\n color: #ffcd75;\n font-size: 9px;\n font-weight: 400;\n}\n.login-form .login-button-box {\n padding: 4px;\n}\n.login-form .login-button {\n height: 48px;\n border-radius: 0;\n background: #ffcd75;\n color: #1a1c2c;\n font-family: inherit;\n font-size: 12px;\n font-weight: 400;\n text-transform: uppercase;\n box-shadow: 0 -4px 0 0 #f4f4f4, 0 4px 0 0 #f4f4f4, -4px 0 0 0 #f4f4f4, 4px 0 0 0 #f4f4f4, inset -4px -4px 0 0 rgba(0, 0, 0, 0.28), inset 4px 4px 0 0 rgba(255, 255, 255, 0.35);\n}\n.login-form .login-button:hover {\n background: #ffcd75;\n filter: brightness(1.1);\n}\n.login-form .login-button:active {\n box-shadow: 0 -4px 0 0 #f4f4f4, 0 4px 0 0 #f4f4f4, -4px 0 0 0 #f4f4f4, 4px 0 0 0 #f4f4f4, inset 4px 4px 0 0 rgba(0, 0, 0, 0.28);\n}\n.login-form .login-signup-link,\n.login-form .login-signup-link span {\n color: #94b0c2;\n font-size: 9px;\n line-height: 1.8;\n}\n#footer {\n color: #94b0c2;\n font-size: 8px;\n}\n.login-form .login-forget-password {\n width: 100%;\n}\n</style>",
"formCssMobile": "<style>\n@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');\n.login-background {\n color-scheme: dark;\n --background: 233 28% 14%;\n --foreground: 0 0% 96%;\n --card: 229 46% 30%;\n --card-foreground: 0 0% 96%;\n --popover: 229 46% 30%;\n --popover-foreground: 0 0% 96%;\n --muted: 233 28% 20%;\n --muted-foreground: 220 30% 80%;\n --accent: 233 28% 24%;\n --accent-foreground: 0 0% 96%;\n --border: 0 0% 96%;\n --input: 0 0% 96%;\n --ring: 0 0% 96%;\n font-family: 'Press Start 2P', ui-monospace, 'Courier New', monospace;\n background-color: #1a1c2c;\n background-image: radial-gradient(#f4f4f4 1px, transparent 1.5px), radial-gradient(#94b0c2 1px, transparent 1.5px), radial-gradient(#f4f4f4 1.5px, transparent 2px);\n background-size: 170px 190px, 110px 130px, 290px 310px;\n background-position: 20px 30px, 70px 90px, 140px 60px;\n}\n@keyframes pixel-blink {\n 50% {\n opacity: 0;\n }\n}\n.login-content {\n padding-left: 12px;\n padding-right: 12px;\n}\n.login-background .login-content .login-panel.login-panel-bleed,\n.login-panel {\n margin: 8px;\n width: calc(100% - 16px);\n border: none;\n border-radius: 0;\n background: #29366f;\n box-shadow: 0 -8px 0 0 #f4f4f4, 0 8px 0 0 #f4f4f4, -8px 0 0 0 #f4f4f4, 8px 0 0 0 #f4f4f4, 0 0 0 8px #1a1c2c, 12px 12px 0 8px rgba(0, 0, 0, 0.5);\n}\n\n.login-background .login-content .login-panel.login-panel-bleed {\n padding-top: 24px;\n padding-bottom: 8px;\n}\n.login-topbar button {\n color: #f4f4f4;\n}\n.login-form {\n font-size: 10px;\n line-height: 1.8;\n}\n.login-logo-box {\n flex-direction: column;\n align-items: center;\n}\n.login-logo-box::after {\n content: '- PRESS START -';\n margin-top: 18px;\n color: #ffcd75;\n font-size: 10px;\n animation: pixel-blink 1s steps(1) infinite;\n}\n.signin-methods > div {\n height: auto;\n padding: 2px;\n border: none;\n border-radius: 0;\n background: transparent;\n overflow: visible;\n}\n.signin-methods [role='tablist'] {\n gap: 12px;\n overflow: visible;\n}\n.signin-methods [role='tab'] {\n flex: none !important;\n padding: 6px 8px;\n border-radius: 0;\n background: #1a1c2c !important;\n color: #94b0c2;\n font-family: inherit;\n font-size: 8px;\n box-shadow: 0 -2px 0 0 #566c86, 0 2px 0 0 #566c86, -2px 0 0 0 #566c86, 2px 0 0 0 #566c86 !important;\n}\n.signin-methods [role='tab'][data-state='active'] {\n background: #ffcd75 !important;\n color: #1a1c2c;\n box-shadow: 0 -2px 0 0 #f4f4f4, 0 2px 0 0 #f4f4f4, -2px 0 0 0 #f4f4f4, 2px 0 0 0 #f4f4f4 !important;\n}\n.login-form label {\n color: #f4f4f4;\n font-size: 10px;\n font-weight: 400;\n line-height: 1.8;\n text-transform: uppercase;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n height: 44px;\n margin: 4px;\n width: calc(100% - 8px);\n border: none;\n border-radius: 0;\n background: #1a1c2c;\n color: #f4f4f4;\n font-family: inherit;\n font-size: 11px;\n box-shadow: 0 -4px 0 0 #f4f4f4, 0 4px 0 0 #f4f4f4, -4px 0 0 0 #f4f4f4, 4px 0 0 0 #f4f4f4;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n color: #566c86;\n font-size: 8px;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n outline: none;\n box-shadow: 0 -4px 0 0 #ffcd75, 0 4px 0 0 #ffcd75, -4px 0 0 0 #ffcd75, 4px 0 0 0 #ffcd75;\n}\n.login-password button {\n right: 6px;\n color: #94b0c2;\n}\n.login-form [role='checkbox'] {\n width: 14px;\n height: 14px;\n margin: 0 4px;\n border: none;\n border-radius: 0;\n background: #1a1c2c;\n box-shadow: 0 -2px 0 0 #f4f4f4, 0 2px 0 0 #f4f4f4, -2px 0 0 0 #f4f4f4, 2px 0 0 0 #f4f4f4;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n background: #ffcd75;\n color: #1a1c2c;\n}\n.login-form a {\n color: #ffcd75;\n font-size: 9px;\n font-weight: 400;\n}\n.login-form .login-button-box {\n padding: 4px;\n}\n.login-form .login-button {\n height: 48px;\n border-radius: 0;\n background: #ffcd75;\n color: #1a1c2c;\n font-family: inherit;\n font-size: 12px;\n font-weight: 400;\n text-transform: uppercase;\n box-shadow: 0 -4px 0 0 #f4f4f4, 0 4px 0 0 #f4f4f4, -4px 0 0 0 #f4f4f4, 4px 0 0 0 #f4f4f4, inset -4px -4px 0 0 rgba(0, 0, 0, 0.28), inset 4px 4px 0 0 rgba(255, 255, 255, 0.35);\n}\n.login-form .login-button:hover {\n background: #ffcd75;\n filter: brightness(1.1);\n}\n.login-form .login-button:active {\n box-shadow: 0 -4px 0 0 #f4f4f4, 0 4px 0 0 #f4f4f4, -4px 0 0 0 #f4f4f4, 4px 0 0 0 #f4f4f4, inset 4px 4px 0 0 rgba(0, 0, 0, 0.28);\n}\n.login-form .login-signup-link,\n.login-form .login-signup-link span {\n color: #94b0c2;\n font-size: 9px;\n line-height: 1.8;\n}\n#footer {\n color: #94b0c2;\n font-size: 8px;\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