Login-Seite individualisierbar (Branding, Texte, Hintergrund)
Some checks failed
CI / PHP Lint (push) Has been cancelled
CI / PHP Lint-1 (push) Has been cancelled
CI / Unit Tests & Static Analysis (push) Has been cancelled
CI / PHP Lint (pull_request) Has been cancelled
CI / PHP Lint-1 (pull_request) Has been cancelled
CI / Unit Tests & Static Analysis (pull_request) Has been cancelled
Some checks failed
CI / PHP Lint (push) Has been cancelled
CI / PHP Lint-1 (push) Has been cancelled
CI / Unit Tests & Static Analysis (push) Has been cancelled
CI / PHP Lint (pull_request) Has been cancelled
CI / PHP Lint-1 (pull_request) Has been cancelled
CI / Unit Tests & Static Analysis (pull_request) Has been cancelled
Neuer Einstellungs-Tab "Login-Seite" (Administration → Einstellungen): - Firmenname und eigenes Logo für die Anmeldeseite - Überschrift, Beschreibungstext, Stichpunkte (eine Zeile je Punkt) und Fußzeile frei setzbar - Hintergrundbild für die linke Bildspalte, alternativ Farbverlauf mit Farbwähler (Start-/Endfarbe) sowie einstellbarer Abdunklung für die Lesbarkeit auf hellen Bildern - Bildspalte abschaltbar: dann zentrierte Anmeldekarte auf dem App-Hintergrund - "Vorschau öffnen" zeigt die Login-Seite als angemeldeter Admin (login.php?preview=1), ohne die Sitzung zu beenden Alle Felder sind optional; leere Werte fallen auf die bisherigen Standardtexte und -farben zurück. Bestehende Installationen sehen unverändert aus, es ist keine Migration nötig. README um den Abschnitt "Login-Seite individualisieren" mit Beispiel- Screenshots ergänzt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
498c7e28e0
commit
9a4b2e1cd4
10 changed files with 308 additions and 16 deletions
|
|
@ -999,6 +999,11 @@ input[type="file"] { font-size: 13px; color: var(--text-secondary); }
|
|||
background: var(--bg-card);
|
||||
}
|
||||
.auth-visual {
|
||||
/* Über die Einstellungen überschreibbar (login_bg_from/-to/-image/-overlay). */
|
||||
--login-from: #3b2f8f;
|
||||
--login-to: #6d5ce7;
|
||||
--login-overlay: 0.4;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 56px;
|
||||
|
|
@ -1007,9 +1012,9 @@ input[type="file"] { font-size: 13px; color: var(--text-secondary); }
|
|||
justify-content: space-between;
|
||||
color: #fff;
|
||||
background:
|
||||
radial-gradient(900px 480px at 12% 8%, rgba(167,139,250,.55), transparent 60%),
|
||||
radial-gradient(700px 520px at 88% 92%, rgba(56,189,248,.35), transparent 62%),
|
||||
linear-gradient(150deg, #3b2f8f 0%, #4b3ec4 45%, #6d5ce7 100%);
|
||||
radial-gradient(900px 480px at 12% 8%, rgba(255,255,255,.18), transparent 60%),
|
||||
radial-gradient(700px 520px at 88% 92%, rgba(0,0,0,.18), transparent 62%),
|
||||
linear-gradient(150deg, var(--login-from) 0%, var(--login-to) 100%);
|
||||
}
|
||||
.auth-visual::after {
|
||||
content: '';
|
||||
|
|
@ -1022,6 +1027,59 @@ input[type="file"] { font-size: 13px; color: var(--text-secondary); }
|
|||
-webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 30%, transparent 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Eigenes Hintergrundbild: Bild füllt die Spalte, darüber liegt eine
|
||||
abdunkelnde Ebene, damit der Text lesbar bleibt. */
|
||||
.auth-visual.has-image {
|
||||
background: var(--login-image) center / cover no-repeat, var(--login-from);
|
||||
}
|
||||
.auth-visual.has-image::after { display: none; }
|
||||
.auth-visual.has-image::before {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
background: linear-gradient(160deg,
|
||||
rgba(0,0,0,calc(var(--login-overlay) * 0.7)) 0%,
|
||||
rgba(0,0,0,var(--login-overlay)) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.auth-brand-logo { max-height: 42px; max-width: 220px; width: auto; }
|
||||
/* Ohne Bildspalte: zentrierte Karte auf dem App-Hintergrund. */
|
||||
.auth-body-single {
|
||||
grid-template-columns: 1fr;
|
||||
background:
|
||||
radial-gradient(760px 420px at 8% -6%, var(--accent-soft), transparent 60%),
|
||||
radial-gradient(640px 400px at 102% 4%, rgba(139,92,246,.10), transparent 62%),
|
||||
var(--bg-body);
|
||||
}
|
||||
.auth-body-single .auth-panel { background: transparent; }
|
||||
.auth-body-single .login-container {
|
||||
max-width: 420px;
|
||||
padding: 34px;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--r-xl);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
/* Farbwähler mit Hex-Eingabe */
|
||||
.color-field { display: flex; align-items: center; gap: 8px; }
|
||||
.color-field input[type="color"] {
|
||||
width: 42px; height: 38px; flex-shrink: 0;
|
||||
padding: 3px;
|
||||
border: 1px solid var(--input-border);
|
||||
border-radius: var(--r-md);
|
||||
background: var(--bg-input);
|
||||
cursor: pointer;
|
||||
}
|
||||
.color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
|
||||
.color-field input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
|
||||
.color-field input[type="text"] { font-family: var(--font-mono); font-size: 13px; }
|
||||
|
||||
.auth-mark {
|
||||
display: flex; align-items: center; gap: 11px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 15px; font-weight: 620;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.auth-visual > * { position: relative; z-index: 1; }
|
||||
.auth-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; }
|
||||
.auth-brand .brand-mark { background: rgba(255,255,255,.16); backdrop-filter: blur(6px); box-shadow: none; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue