private/desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

layout
All checks were successful
Deploy / deploy-staging (push) Successful in 22s
Details
Deploy / deploy-production (push) Has been skipped
Details

Browse Source
This commit is contained in:
Lars Gebhardt-Kusche
2026-06-15 20:17:28 +02:00
parent 823c5d197d
commit 8081ea2486
3 changed files with 152 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

132
public/assets/auth/login.css
View File

@@ -1,6 +1,6 @@
:root {
color-scheme: dark;
font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
}
* {
@@ -12,63 +12,86 @@ body {
min-height: 100vh;
color: #f8fafc;
background:
radial-gradient(circle at top, rgba(255, 222, 173, 0.28), transparent 28%),
linear-gradient(145deg, #101827 0%, #18253d 52%, #0f172a 100%);
radial-gradient(circle at 18% 84%, rgba(142, 214, 119, 0.22), transparent 18%),
linear-gradient(0deg, rgba(14, 27, 19, 0.28), rgba(14, 27, 19, 0.28)),
linear-gradient(135deg, #26442b 0%, #355939 26%, #5f4a2f 58%, #22351f 100%);
}
.login-shell {
min-height: 100vh;
display: grid;
place-items: center;
padding: 24px;
place-items: start center;
padding: 170px 24px 30px;
position: relative;
}
.login-shell::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 16%),
radial-gradient(circle at center, transparent 24%, rgba(7, 13, 8, 0.18) 100%);
pointer-events: none;
}
.login-panel {
width: min(480px, 100%);
padding: 28px;
border-radius: 28px;
background: rgba(15, 23, 42, 0.58);
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
backdrop-filter: blur(24px);
width: min(420px, 100%);
position: relative;
z-index: 1;
padding: 0;
border-radius: 0;
background: transparent;
border: 0;
box-shadow: none;
backdrop-filter: none;
}
.login-panel-wide {
width: min(760px, 100%);
width: min(460px, 100%);
}
.login-panel-admin {
width: min(1180px, 100%);
padding: 28px;
border-radius: 28px;
background: rgba(9, 18, 12, 0.34);
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 80px rgba(2, 6, 23, 0.42);
backdrop-filter: blur(16px);
}
.login-panel-top {
margin-bottom: 24px;
margin-bottom: 18px;
text-align: center;
}
.login-kicker {
margin: 0 0 12px;
font-size: 12px;
letter-spacing: 0.18em;
font-size: 0.76rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #cbd5e1;
color: rgba(248, 250, 252, 0.84);
font-weight: 700;
}
.login-panel h1 {
margin: 0 0 10px;
font-size: 36px;
font-size: 2.2rem;
line-height: 1.05;
font-weight: 400;
}
.login-copy {
margin: 0;
color: #dbe5f1;
color: rgba(248, 250, 252, 0.9);
line-height: 1.5;
}
.login-actions {
display: grid;
gap: 12px;
margin-bottom: 24px;
margin-bottom: 0;
}
.login-button {
@@ -76,24 +99,27 @@ body {
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 16px;
border-radius: 14px;
padding: 0 18px;
border-radius: 999px;
text-decoration: none;
font-weight: 700;
border: 0;
cursor: pointer;
font: inherit;
transition: transform 160ms ease, filter 160ms ease;
}
.login-button-primary {
color: #082032;
background: linear-gradient(180deg, #a7f3d0, #6ee7b7);
color: #082f49;
background: linear-gradient(180deg, #7dd3fc, #0ea5e9);
box-shadow: 0 14px 30px rgba(14, 165, 233, 0.22);
}
.login-button-secondary {
color: #f8fafc;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(248, 250, 252, 0.18);
border: 1px solid rgba(248, 250, 252, 0.16);
backdrop-filter: blur(8px);
}
.login-button-disabled {
@@ -107,9 +133,14 @@ body {
background: linear-gradient(180deg, #fb7185, #e11d48);
}
.login-button:hover {
transform: translateY(-1px);
filter: brightness(1.03);
}
.login-form {
display: grid;
gap: 18px;
gap: 12px;
}
.login-form-grid {
@@ -124,25 +155,41 @@ body {
}
.login-field span {
font-size: 13px;
color: #cbd5e1;
font-size: 0.88rem;
color: rgba(248, 250, 252, 0.94);
}
.login-field input,
.login-field textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(15, 23, 42, 0.52);
padding: 0 18px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.10);
background: rgba(213, 223, 193, 0.54);
color: #f8fafc;
font: inherit;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
backdrop-filter: blur(9px);
outline: none;
}
.login-field textarea {
min-height: 120px;
resize: vertical;
padding: 14px 18px;
border-radius: 18px;
}
.login-field input::placeholder,
.login-field textarea::placeholder {
color: rgba(248, 250, 252, 0.82);
}
.login-field input:focus,
.login-field textarea:focus {
border-color: rgba(255, 255, 255, 0.26);
background: rgba(213, 223, 193, 0.62);
}
.login-field-span-2 {
@@ -153,7 +200,9 @@ body {
margin-bottom: 18px;
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(248, 250, 252, 0.94);
backdrop-filter: blur(10px);
}
.login-notice strong {
@@ -167,15 +216,15 @@ body {
}
.login-notice-success {
background: rgba(20, 83, 45, 0.45);
background: rgba(20, 83, 45, 0.34);
}
.login-notice-error {
background: rgba(127, 29, 29, 0.4);
background: rgba(127, 29, 29, 0.24);
}
.login-notice-info {
background: rgba(30, 41, 59, 0.5);
background: rgba(9, 18, 12, 0.34);
}
.login-list {
@@ -276,6 +325,15 @@ body {
}
@media (max-width: 640px) {
.login-shell {
padding: 110px 14px 24px;
}
.login-panel,
.login-panel-wide {
width: 100%;
}
.login-form-grid {
grid-template-columns: 1fr;
}