MokoConsulting/MokoGIT
1
0
Fork 0
Code Issues 161 Pull Requests 2 Releases 97 Wiki Activity

feat(theme): swap auth backdrop to brand header-background.svg #806

Merged
jmiller merged 1 commits from feat/header-bg-swap into dev 2026-07-18 18:35:24 +00:00
Conversation 0 Commits 1 Files Changed 3
+236 -111
3 changed files with 236 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/img/header-background.svg
+233
View File
File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

public/assets/img/mokoonyx-bg.svg
-108
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 42 KiB

web_src/css/mokogit-brand.css
+3 -3
View File
@@ -86,12 +86,12 @@ footer.page-footer {
text-decoration-thickness: from-font;
}
/* ---- Login / auth screens: MokoOnyx branded backdrop ----
/* ---- Login / auth screens: MokoGIT branded backdrop ----
* Gitea reuses the "signin" body class across the whole auth family: the sign-in,
* sign-up, 2FA (twofa / scratch), OpenID, WebAuthn, and change-password pages all
* render <div class="page-content user signin ...">; link-account uses "link-account".
* Targeting those two classes brands every login/auth screen consistently.
* We paint the MokoOnyx site pattern (vendored at public/assets/img/mokoonyx-bg.svg,
* We paint the MokoGIT brand header background (vendored at public/assets/img/header-background.svg,
* served at /assets/img/) behind the centered form via :has() on <body> — no template
* markup is touched, so this survives upstream merges. The form is then lifted onto a
* clean surface so it stays legible over the pattern in both light and dark themes.
@@ -99,7 +99,7 @@ footer.page-footer {
* WebAuthn prompt, whose grid omits the `middle` class. */
body:has(.page-content.user.signin),
body:has(.page-content.user.link-account) {
background-image: url("/assets/img/mokoonyx-bg.svg");
background-image: url("/assets/img/header-background.svg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;