From afbfe379b46eece81d135a3c333c0fc9a76d6bb1 Mon Sep 17 00:00:00 2001 From: Jonathan Miller Date: Sat, 18 Jul 2026 18:45:22 -0500 Subject: [PATCH] feat(ui): retheme login page to MokoAi mokoonyx look (mold for #822) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Login page is the reference "mold" for the wider web-UI retheme (#822). Edits both layout and CSS (not CSS-only): - templates/user/auth/signin_inner.tmpl: wrap the auth card in .mokogit-auth-card, add .mokogit-auth-brand/.mokogit-auth-logo, and make the logo fall back to logo.svg when the optional admin login-logo.png is absent (fixes broken login logo, #819). - web_src/css/mokogit-brand.css: extend the auth-screen section with the MokoAi (mokoonyx) card surface, header/segment, primary button, links and input focus ring — all via theme variables so light+dark follow the active MokoGIT theme. Font Awesome 7 + mokoonyx tokens are already vendored and imported in web_src/css/index.css; this change relies on the built bundle including them. Refs #822. Fixes #819. Claude-Session: https://claude.ai/code/session_01D5Zxu4xRRGoh9etzgShP4P --- templates/user/auth/signin_inner.tmpl | 13 ++++-- web_src/css/mokogit-brand.css | 59 +++++++++++++++++++++++++++ 2 files changed, 69 insertions(+), 3 deletions(-) diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl index 3c6ea78f78..fab7ffedf3 100644 --- a/templates/user/auth/signin_inner.tmpl +++ b/templates/user/auth/signin_inner.tmpl @@ -1,10 +1,16 @@ -
-
- +
+ {{/* MokoGIT: MokoAi (mokoonyx) login "mold" — branded card wrapper + logo. + login-logo.png is an optional admin-branding upload; fall back to the + always-present logo.svg so the mark never renders broken (#819). */}} +
+
{{if or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn)}} {{template "base/alert" .}} {{end}} +

{{if .LinkAccountMode}} {{ctx.Locale.Tr "auth.oauth_signin_title"}} @@ -58,6 +64,7 @@ {{template "user/auth/external_auth_methods" .}} {{end}}

+
{{/* .mokogit-auth-card */}}
{{if or .EnablePasskeyAuth .ShowRegistrationButton}} diff --git a/web_src/css/mokogit-brand.css b/web_src/css/mokogit-brand.css index cd6bb28247..da85388fc3 100644 --- a/web_src/css/mokogit-brand.css +++ b/web_src/css/mokogit-brand.css @@ -112,3 +112,62 @@ body:has(.page-content.user.link-account) { border-radius: var(--border-radius); box-shadow: var(--mokogit-shadow-lg); } + +/* ---- Login/auth card: MokoAi (mokoonyx) look ---- + * This login treatment is the reference "mold" for future page rethemes + * (issue #822). It maps the ai.dev mokoonyx surface onto Gitea's Fomantic + * auth card using theme variables (so light + dark both follow the active + * MokoGIT theme) rather than hardcoded hex. Scope is intentionally limited to + * the auth family (.page-content.user.signin / .link-account). The card is + * wrapped in .mokogit-auth-card by templates/user/auth/signin_inner.tmpl. */ +.mokogit-auth-card { + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: var(--mokogit-shadow-lg); +} +.mokogit-auth-logo { + filter: drop-shadow(0 2px 6px rgb(0 0 0 / 35%)); +} +.page-content.user.signin .ui.attached.header, +.page-content.user.link-account .ui.attached.header { + background: var(--color-box-header); + border-color: var(--color-secondary); + color: var(--color-text); + font-weight: 600; +} + +.page-content.user.signin .ui.attached.segment, +.page-content.user.link-account .ui.attached.segment { + background: var(--color-box-body); + border-color: var(--color-secondary); +} + +/* Primary action + links use the mokoonyx accent already defined by the theme + * (--color-primary = #3f8ff0 in theme-mokogit-dark). */ +.page-content.user.signin .ui.primary.button, +.page-content.user.link-account .ui.primary.button { + background: var(--color-primary); + color: var(--color-primary-contrast); +} +.page-content.user.signin .ui.primary.button:hover, +.page-content.user.link-account .ui.primary.button:hover { + background: var(--color-primary-hover); +} +.page-content.user.signin a, +.page-content.user.link-account a { + color: var(--color-primary); +} + +/* Inputs: mokoonyx field surface + focus ring. */ +.page-content.user.signin .ui.form input:not([type="checkbox"]):not([type="radio"]), +.page-content.user.link-account .ui.form input:not([type="checkbox"]):not([type="radio"]) { + background: var(--color-input-background); + border-color: var(--color-input-border); + color: var(--color-input-text); +} +.page-content.user.signin .ui.form input:focus, +.page-content.user.link-account .ui.form input:focus { + border-color: var(--color-primary); + box-shadow: 0 0 0 2px var(--color-primary-alpha-30); +} -- 2.52.0