crimata-os/ui/styles/login.css
Andrew Gundersen 44f3192b78 Add multi-user auth with sessions and login UI
- auth: POST /auth validates PAM, returns session token
- auth: GET /me validates Bearer token, returns username
- auth: POST /logout destroys session
- auth: POST /users creates Linux user via useradd+chpasswd
- session.c: in-memory token store (1024 slots, pthread mutex, /dev/urandom tokens)
- user.c: fork/exec useradd + chpasswd with username validation
- ui: login overlay shown until authenticated (x-cloak)
- ui: token persisted in sessionStorage, validated on page load
- ui: username displayed in dock after login
- ui: apps only load after successful auth

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-27 11:33:07 -05:00

83 lines
1.5 KiB
CSS

#login-overlay {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
}
.login-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 20px;
padding: 40px 48px;
width: 360px;
display: flex;
flex-direction: column;
gap: 20px;
color: #fff;
}
.login-card h1 {
font-size: 1.4rem;
font-weight: 600;
text-align: center;
letter-spacing: -0.02em;
}
.login-card input {
width: 100%;
padding: 12px 16px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: 0.95rem;
outline: none;
transition: border-color 0.15s;
}
.login-card input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.login-card input:focus {
border-color: rgba(255, 255, 255, 0.55);
}
.login-card button {
padding: 12px;
border-radius: 10px;
border: none;
background: rgba(255, 255, 255, 0.9);
color: #111;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.login-card button:hover {
background: #fff;
}
.login-error {
font-size: 0.85rem;
color: #ff6b6b;
text-align: center;
min-height: 1.2em;
}
#dock-user {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
display: flex;
align-items: center;
padding: 0 8px;
cursor: default;
user-select: none;
}