Terminal

{
  "name": "<application name>",
  "organization": "<organization>",
  "themeData": {
    "themeType": "dark",
    "colorPrimary": "#33ff66",
    "borderRadius": 0,
    "isCompact": false,
    "isEnabled": true
  },
  "formOffset": 2,
  "formCss": "<style>\n.login-background {\n  color-scheme: dark;\n  --background: 120 30% 3%;\n  --foreground: 120 100% 60%;\n  --card: 120 40% 4%;\n  --card-foreground: 120 100% 60%;\n  --popover: 120 40% 4%;\n  --popover-foreground: 120 100% 60%;\n  --muted: 120 40% 7%;\n  --muted-foreground: 120 40% 45%;\n  --accent: 120 40% 10%;\n  --accent-foreground: 120 100% 60%;\n  --border: 120 60% 20%;\n  --input: 120 60% 25%;\n  --ring: 120 100% 60%;\n  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n  background: radial-gradient(ellipse at 50% 40%, #07200c 0%, #020803 70%);\n  color: #33ff66;\n}\n.login-background > div:first-of-type,\n.login-content,\n#footer {\n  position: relative;\n  z-index: 1;\n}\n.login-background::after {\n  content: '';\n  position: fixed;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);\n  animation: terminal-flicker 4s steps(1) infinite;\n}\n@keyframes terminal-flicker {\n  0%, 96%, 100% {\n    opacity: 1;\n  }\n  97% {\n    opacity: 0.75;\n  }\n}\n@keyframes terminal-blink {\n  50% {\n    opacity: 0;\n  }\n}\n.login-content > div {\n  max-width: 440px;\n}\n.login-panel {\n  border: 1px solid color-mix(in srgb, #33ff66 55%, transparent);\n  border-radius: 0;\n  background: rgba(2, 14, 4, 0.75);\n  box-shadow: 0 0 0 4px rgba(2, 14, 4, 0.9), 0 0 0 5px color-mix(in srgb, #33ff66 25%, transparent), 0 0 60px color-mix(in srgb, #33ff66 18%, transparent);\n}\n.login-background > div:first-of-type button {\n  color: #33ff66;\n}\n.login-form {\n  text-shadow: 0 0 6px color-mix(in srgb, #33ff66 55%, transparent);\n}\n.login-logo-box img {\n  filter: grayscale(1) brightness(1.4) drop-shadow(0 0 8px color-mix(in srgb, #33ff66 50%, transparent));\n}\n.login-logo-box::after {\n  content: 'login: _';\n  display: block;\n  margin-top: 14px;\n  color: #33ff66;\n  font-size: 13px;\n  animation: terminal-blink 1.1s steps(1) infinite;\n}\n.login-logo-box {\n  flex-direction: column;\n  align-items: center;\n}\n.signin-methods > div {\n  border: 1px dashed color-mix(in srgb, #33ff66 45%, transparent);\n  border-radius: 0;\n  background: transparent;\n}\n.signin-methods [role='tab'] {\n  border-radius: 0;\n  color: color-mix(in srgb, #33ff66 65%, transparent);\n  font-family: inherit;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  background: #33ff66 !important;\n  color: #021004;\n  text-shadow: none;\n  box-shadow: none !important;\n}\n.login-form label {\n  color: #33ff66;\n  font-size: 13px;\n  text-transform: lowercase;\n}\n.login-username label::before,\n.login-password label::before {\n  content: '$ ';\n  opacity: 0.6;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 40px;\n  padding-left: 22px;\n  border: none;\n  border-bottom: 1px dashed color-mix(in srgb, #33ff66 55%, transparent);\n  border-radius: 0;\n  background: transparent;\n  color: #33ff66;\n  caret-color: #33ff66;\n  font-family: inherit;\n  text-shadow: inherit;\n  box-shadow: none;\n}\n.login-username,\n.login-password > div {\n  position: relative;\n}\n.login-username::after,\n.login-password > div::after {\n  content: '>';\n  position: absolute;\n  left: 4px;\n  bottom: 9px;\n  color: #33ff66;\n  pointer-events: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-bottom-style: solid;\n  border-bottom-color: #33ff66;\n  background: color-mix(in srgb, #33ff66 6%, transparent);\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n  color: color-mix(in srgb, #33ff66 35%, transparent);\n}\n.login-password button {\n  color: #33ff66;\n}\n.login-form [role='checkbox'] {\n  border: 1px solid #33ff66;\n  border-radius: 0;\n  background: transparent;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #33ff66;\n  color: #021004;\n}\n.login-form a {\n  color: #33ff66;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.login-form .login-button {\n  height: 42px;\n  border: 1px solid #33ff66;\n  border-radius: 0;\n  background: transparent;\n  color: #33ff66;\n  font-family: inherit;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  box-shadow: 0 0 12px color-mix(in srgb, #33ff66 25%, transparent), inset 0 0 12px color-mix(in srgb, #33ff66 15%, transparent);\n}\n.login-form .login-button::before {\n  content: '[ ';\n}\n.login-form .login-button::after {\n  content: ' ]';\n}\n.login-form .login-button:hover {\n  background: #33ff66;\n  color: #021004;\n  text-shadow: none;\n}\n.login-form .login-signup-link,\n.login-form .login-signup-link span {\n  color: color-mix(in srgb, #33ff66 65%, transparent);\n}\n#footer {\n  color: color-mix(in srgb, #33ff66 55%, transparent);\n}\n#footer img {\n  filter: grayscale(1) brightness(1.4);\n  opacity: 0.7;\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>",
  "formCssMobile": "<style>\n.login-background {\n  color-scheme: dark;\n  --background: 120 30% 3%;\n  --foreground: 120 100% 60%;\n  --card: 120 40% 4%;\n  --card-foreground: 120 100% 60%;\n  --popover: 120 40% 4%;\n  --popover-foreground: 120 100% 60%;\n  --muted: 120 40% 7%;\n  --muted-foreground: 120 40% 45%;\n  --accent: 120 40% 10%;\n  --accent-foreground: 120 100% 60%;\n  --border: 120 60% 20%;\n  --input: 120 60% 25%;\n  --ring: 120 100% 60%;\n  font-family: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;\n  background: radial-gradient(ellipse at 50% 40%, #07200c 0%, #020803 70%);\n  color: #33ff66;\n}\n.login-background > div:first-of-type,\n.login-content,\n#footer {\n  position: relative;\n  z-index: 1;\n}\n.login-background::after {\n  content: '';\n  position: fixed;\n  inset: 0;\n  z-index: 2;\n  pointer-events: none;\n  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px);\n  animation: terminal-flicker 4s steps(1) infinite;\n}\n@keyframes terminal-flicker {\n  0%, 96%, 100% {\n    opacity: 1;\n  }\n  97% {\n    opacity: 0.75;\n  }\n}\n@keyframes terminal-blink {\n  50% {\n    opacity: 0;\n  }\n}\n.login-background .login-content .login-panel.login-panel-bleed,\n.login-panel {\n  padding-top: 20px;\n  border: 1px solid color-mix(in srgb, #33ff66 45%, transparent);\n  border-radius: 0;\n  background: rgba(2, 14, 4, 0.75);\n}\n.login-background > div:first-of-type button {\n  color: #33ff66;\n}\n.login-form {\n  text-shadow: 0 0 6px color-mix(in srgb, #33ff66 55%, transparent);\n}\n.login-logo-box img {\n  filter: grayscale(1) brightness(1.4) drop-shadow(0 0 8px color-mix(in srgb, #33ff66 50%, transparent));\n}\n.login-logo-box::after {\n  content: 'login: _';\n  display: block;\n  margin-top: 14px;\n  color: #33ff66;\n  font-size: 13px;\n  animation: terminal-blink 1.1s steps(1) infinite;\n}\n.login-logo-box {\n  flex-direction: column;\n  align-items: center;\n}\n.signin-methods > div {\n  border: 1px dashed color-mix(in srgb, #33ff66 45%, transparent);\n  border-radius: 0;\n  background: transparent;\n}\n.signin-methods [role='tab'] {\n  border-radius: 0;\n  color: color-mix(in srgb, #33ff66 65%, transparent);\n  font-family: inherit;\n}\n.signin-methods [role='tab'][data-state='active'] {\n  background: #33ff66 !important;\n  color: #021004;\n  text-shadow: none;\n  box-shadow: none !important;\n}\n.login-form label {\n  color: #33ff66;\n  font-size: 13px;\n  text-transform: lowercase;\n}\n.login-username label::before,\n.login-password label::before {\n  content: '$ ';\n  opacity: 0.6;\n}\n.login-form input:not([type='checkbox']):not([type='radio']) {\n  height: 40px;\n  padding-left: 22px;\n  border: none;\n  border-bottom: 1px dashed color-mix(in srgb, #33ff66 55%, transparent);\n  border-radius: 0;\n  background: transparent;\n  color: #33ff66;\n  caret-color: #33ff66;\n  font-family: inherit;\n  text-shadow: inherit;\n  box-shadow: none;\n}\n.login-username,\n.login-password > div {\n  position: relative;\n}\n.login-username::after,\n.login-password > div::after {\n  content: '>';\n  position: absolute;\n  left: 4px;\n  bottom: 9px;\n  color: #33ff66;\n  pointer-events: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio']):focus {\n  border-bottom-style: solid;\n  border-bottom-color: #33ff66;\n  background: color-mix(in srgb, #33ff66 6%, transparent);\n  box-shadow: none;\n}\n.login-form input:not([type='checkbox']):not([type='radio'])::placeholder {\n  color: color-mix(in srgb, #33ff66 35%, transparent);\n}\n.login-password button {\n  color: #33ff66;\n}\n.login-form [role='checkbox'] {\n  border: 1px solid #33ff66;\n  border-radius: 0;\n  background: transparent;\n}\n.login-form [role='checkbox'][data-state='checked'] {\n  background: #33ff66;\n  color: #021004;\n}\n.login-form a {\n  color: #33ff66;\n  text-decoration: underline;\n  text-underline-offset: 3px;\n}\n.login-form .login-button {\n  height: 42px;\n  border: 1px solid #33ff66;\n  border-radius: 0;\n  background: transparent;\n  color: #33ff66;\n  font-family: inherit;\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  box-shadow: 0 0 12px color-mix(in srgb, #33ff66 25%, transparent), inset 0 0 12px color-mix(in srgb, #33ff66 15%, transparent);\n}\n.login-form .login-button::before {\n  content: '[ ';\n}\n.login-form .login-button::after {\n  content: ' ]';\n}\n.login-form .login-button:hover {\n  background: #33ff66;\n  color: #021004;\n  text-shadow: none;\n}\n.login-form .login-signup-link,\n.login-form .login-signup-link span {\n  color: color-mix(in srgb, #33ff66 65%, transparent);\n}\n#footer {\n  color: color-mix(in srgb, #33ff66 55%, transparent);\n}\n#footer img {\n  filter: grayscale(1) brightness(1.4);\n  opacity: 0.7;\n}\n.login-form .login-forget-password {\n  width: 100%;\n}\n</style>"
}