tomh104/nat-as-server
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

preparing for keycloak authentication
Some checks failed
PHPUnit / test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
tom.hempel
2026-06-29 11:31:53 +02:00
parent cecaf26c85
commit 9bd9d9653c
8 changed files with 540 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
website/css/style.css
View File

@ -1091,7 +1091,7 @@ body.login-active .main-content {
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 28px 32px;
padding: 48px 32px;
overflow: hidden;
isolation: isolate;
}
@ -1101,8 +1101,7 @@ body.login-active .main-content {
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 60% at 30% 40%, rgba(37, 99, 235, 0.12), transparent 65%),
radial-gradient(ellipse 55% 45% at 75% 65%, rgba(79, 70, 229, 0.08), transparent 55%),
linear-gradient(135deg, rgba(219, 234, 254, 0.78) 0%, rgba(248, 250, 252, 0.96) 48%, rgba(238, 242, 255, 0.72) 100%),
var(--bg);
}
@ -1110,56 +1109,28 @@ body.login-active .main-content {
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 25%, transparent 80%);
}
.login-orb {
position: absolute;
border-radius: 50%;
filter: blur(72px);
opacity: 0.35;
animation: login-orb-drift 22s ease-in-out infinite;
}
.login-orb--a {
width: 420px;
height: 420px;
background: rgba(37, 99, 235, 0.15);
top: 10%;
left: 15%;
}
.login-orb--b {
width: 300px;
height: 300px;
background: rgba(79, 70, 229, 0.1);
bottom: 10%;
right: 20%;
animation-delay: -9s;
}
@keyframes login-orb-drift {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(18px, -12px); }
linear-gradient(rgba(100, 116, 139, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(100, 116, 139, 0.08) 1px, transparent 1px);
background-size: 48px 48px;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent 92%);
}
.login-screen__content {
position: relative;
z-index: 1;
width: 100%;
max-width: 400px;
max-width: 980px;
}
.login-brand {
margin-bottom: 28px;
margin-bottom: 26px;
}
.login-brand__title {
font-size: 1.5rem;
font-weight: 700;
font-size: 1.75rem;
font-weight: 750;
line-height: 1.25;
letter-spacing: -0.02em;
letter-spacing: 0;
margin-bottom: 6px;
}
@ -1171,7 +1142,12 @@ body.login-active .main-content {
.login-card {
position: relative;
overflow: hidden;
box-shadow: var(--shadow-lg), var(--accent-glow), var(--shadow-inset);
min-height: 360px;
padding: 30px 32px 32px;
border-color: rgba(148, 163, 184, 0.34);
border-radius: 16px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.06);
}
.login-card::before {
content: '';
@ -1179,23 +1155,101 @@ body.login-active .main-content {
inset: 0 0 auto 0;
height: 2px;
background: var(--accent-gradient);
opacity: 0.85;
opacity: 0.75;
}
.login-card__heading {
font-size: 1.15rem;
font-weight: 700;
margin-bottom: 4px;
font-size: 1.25rem;
font-weight: 750;
margin-bottom: 6px;
}
.login-card__lead {
font-size: 0.875rem;
font-size: 0.925rem;
color: var(--text-secondary);
margin-bottom: 20px;
margin-bottom: 26px;
}
.login-options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}
.login-options .login-card {
min-width: 0;
}
.login-options .login-card[hidden] {
display: none;
}
.login-card--sso {
display: flex;
flex-direction: column;
}
.login-card--sso .login-sso {
margin-top: 28px;
}
.login-sso__logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
margin-bottom: 16px;
padding: 0 8px;
}
.login-sso__logo img {
display: block;
max-width: 100%;
max-height: 90px;
object-fit: contain;
}
.login-sso__logo span {
display: none;
color: var(--text);
font-size: 1rem;
font-weight: 700;
text-align: center;
}
.login-sso__logo--fallback span {
display: block;
}
.login-form .form-group {
margin-bottom: 16px;
margin-bottom: 18px;
}
.login-sso {
margin-top: 0;
}
.login-sso__button {
min-height: 50px;
background: #ffffff;
border-color: rgba(37, 99, 235, 0.34);
color: var(--primary-text);
font-weight: 600;
}
.login-sso__button:disabled {
background: #f8fafc;
border-color: rgba(148, 163, 184, 0.36);
color: #64748b;
cursor: default;
box-shadow: none;
}
.login-form .btn-primary {
min-height: 50px;
margin-top: 4px;
font-size: 0.95rem;
}
.login-alert {
@ -1212,9 +1266,8 @@ body.login-active .main-content {
}
.login-card__footnote {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
margin-top: 22px;
text-align: center;
font-size: 0.8rem;
color: var(--text-secondary);
}
@ -1227,10 +1280,23 @@ body.login-active .main-content {
align-items: flex-start;
padding-top: 48px;
}
.login-options {
grid-template-columns: 1fr;
}
.login-card {
min-height: 0;
padding: 26px 22px;
}
.login-brand__title {
font-size: 1.45rem;
}
}
@media (prefers-reduced-motion: reduce) {
.login-orb,
.spinner {
animation: none;
}