Casdoor集成市场

Retro | 登录主题

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.

Casdoor 官方核验浅色复古趣味纯 CSS
套用这个主题查看源码
Retro 登录页

会改哪些设置

主题default
圆角0px
表单位置居中
表单CSS是
表单CSS（移动端）是

这些都在 Casdoor 应用的 界面定制 标签页里，套用主题之后还可以继续调整。

套用到应用

  1. 在下面填好应用，调整主题的设置，然后复制 JSON。
  2. 在 Casdoor 控制台打开 应用，编辑这个应用，点击顶部的 导入JSON，粘贴 JSON 后点 确定。
  3. 点击 保存。下次打开登录页时就会用上这个主题。
{
  "name": "<应用名称>",
  "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>"
}

更多登录主题

查看全部

Aurora

登录主题

A 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.

浅色毛玻璃渐变

Backdrop

登录主题

Your 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.

深色背景图毛玻璃

Bare

登录主题

Nothing 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.

浅色极简无卡片