Pixel

{
  "name": "<应用名称>",
  "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>"
}