/* * Restyle Frappe's stock /login page to match the VSP Suite landing page's * design language (see apps/vsp_suite_core/vsp_suite_core/www/index.html). * * Loaded via `web_include_css` in hooks.py, which applies to EVERY website * page (/, /signup, /login, ...). Unlike www/index.html and www/signup/index.html, * the stock /login page does not receive `branding.theme.tokens` on , * so no --color-* custom properties exist here to hook into. * * To stay consistent with the rest of the suite anyway, the colors below are the * literal hex values that vsp_suite_core/branding.py's VSP_BRAND_THEME (the * "vsp-brand" preset, derived from the VSP AI & Robotics logo) resolves to. If * VSP_BRAND_THEME ever changes, update the values here too. * * Every rule is scoped under #page-login, the id Frappe v15 renders uniquely for the * login route (`
`, confirmed via * `curl -s http://vsp-suite.localhost:8000/login`). Nothing here targets a bare * element (body, a, .btn, ...) or an unscoped class, so it cannot reach markup on * /, /signup, or any other website page. */ #page-login { --color-primary: #16419b; /* vsp-brand: primary_color */ --color-primary-hover: #0f2f7d; /* vsp-brand: primary_hover_color */ --color-neutral: #f5f6f7; /* vsp-brand: neutral_color (inherited from DEFAULT_THEME) */ --color-surface: #ffffff; /* vsp-brand: surface_color (inherited from DEFAULT_THEME) */ --color-on-primary: #ffffff; /* vsp-brand: on_primary_color (inherited from DEFAULT_THEME) */ --color-on-surface: #17181a; /* vsp-brand: on_surface_color (inherited from DEFAULT_THEME) */ --color-on-surface-muted: #6b7075; /* vsp-brand: on_surface_muted_color (inherited from DEFAULT_THEME) */ --color-border: #dfe2e5; /* vsp-brand: border_color (inherited from DEFAULT_THEME) */ --color-control-border: #c9cdd1; /* vsp-brand: control_border_color (inherited from DEFAULT_THEME) */ --color-focus: #1e52c4; /* vsp-brand: focus_color */ --color-error: #c73832; /* vsp-brand: error_color (inherited from DEFAULT_THEME) */ } /* Page background: a subtle branded tone behind the white card, plus a faint geometric pattern echoing the angular "V" strokes of the VSP AI & Robotics logomark. The strokes sit at ~5% navy opacity so they read as texture, not decoration -- the login card must stay the dominant element on the page. */ #page-login { background-color: var(--color-neutral); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%2316419B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.05'%3E%3Cpath d='M20 24 L52 68 L84 24'/%3E%3Cpath d='M140 108 L172 152 L204 108'/%3E%3Cpath d='M-16 150 L16 194 L48 150'/%3E%3Cpath d='M170 -6 L194 28 L218 -6'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; padding-bottom: 64px; } /* Card */ #page-login .page-card { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.07); } /* Heading */ #page-login .page-card-head { padding-top: max(7vh, 40px); } #page-login .page-card-head img.app-logo { max-height: 40px; } #page-login .page-card-head h4 { margin-top: 18px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-on-surface); } /* Inputs */ #page-login .page-card-body input[type="text"], #page-login .page-card-body input[type="email"], #page-login .page-card-body input[type="password"] { border: 1px solid var(--color-control-border); border-radius: 8px; background: var(--color-surface); color: var(--color-on-surface); font-size: 14.5px; } #page-login .page-card-body input[type="text"]:focus, #page-login .page-card-body input[type="email"]:focus, #page-login .page-card-body input[type="password"]:focus { outline: 2px solid var(--color-focus); outline-offset: 1px; } #page-login .page-card-body.invalid input[type="text"], #page-login .page-card-body.invalid input[type="email"], #page-login .page-card-body.invalid input[type="password"] { border-color: var(--color-error); } #page-login .field-icon { color: var(--color-on-surface-muted); } /* Primary button */ #page-login .btn-login, #page-login .btn-forgot { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); border-radius: 8px; font-weight: 650; letter-spacing: -0.005em; min-height: 44px; box-shadow: none; } #page-login .btn-login:hover, #page-login .btn-forgot:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); } /* Secondary ("Login with Email Link") button */ #page-login .btn-login-option { border-radius: 8px; font-weight: 600; } /* Links: "Forgot Password?", "Back to Login", sign-up message */ #page-login .forgot-password-message a, #page-login .sign-up-message a { color: var(--color-on-surface-muted); font-weight: 600; } #page-login .forgot-password-message a:hover, #page-login .sign-up-message a:hover { color: var(--color-on-surface); } #page-login .toggle-password { color: var(--color-on-surface-muted); }