ivooskamp/clearview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

auth: restyle login/setup/modal to match site light theme

Browse Source
This commit is contained in:
Ivo Oskamp 2026-05-28 16:21:42 +02:00
parent bd8e2268db
commit ed3c080976
2 changed files with 69 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
containers/clearview/site/styles.css
View File

@ -754,26 +754,71 @@ strong {
}
/* === Auth (login / setup) pages and header badge ============================== */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #0f1115; margin: 0; }
.auth-card { width: 360px; max-width: 92vw; padding: 28px; background: #1a1d24; border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35); color: #e6e8ee; font-family: system-ui, sans-serif; }
.auth-card h1 { margin: 0 0 4px; font-size: 22px; }
.auth-sub { margin: 0 0 18px; opacity: .75; }
.auth-card form { display: flex; flex-direction: column; gap: 12px; }
.auth-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.auth-card input[type=text], .auth-card input[type=password], .auth-card input:not([type]) { padding: 8px 10px; background: #0e1116; border: 1px solid #2a2f3a; border-radius: 6px; color: inherit; }
.auth-card .auth-remember { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; }
.auth-card button { padding: 10px; background: #3b82f6; border: 0; border-radius: 6px; color: #fff; font-weight: 600; cursor: pointer; }
.auth-card button:hover { background: #2563eb; }
.auth-error { background: #3a1f25; color: #fda4af; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.user-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid #2a2f3a; border-radius: 999px; font-size: 12px; }
.user-badge button { background: transparent; border: 0; color: #93c5fd; cursor: pointer; padding: 0; }
.auth-page {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; margin: 0;
color: var(--cv-text-primary);
background: linear-gradient(165deg, var(--cv-page), #eef7fb 55%, #f6f4ee 100%);
font-family: inherit;
}
.auth-card {
width: 380px; max-width: 92vw; padding: 32px;
background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.82));
border: 1px solid var(--cv-border);
border-radius: 16px;
box-shadow: var(--cv-shadow);
}
.auth-card h1 { margin: 0 0 4px; font-size: 22px; color: var(--cv-text-primary); }
.auth-sub { margin: 0 0 20px; color: var(--cv-text-secondary); }
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cv-text-secondary); }
.auth-card input[type=text],
.auth-card input[type=password],
.auth-card input:not([type]) {
padding: 10px 12px;
background: var(--cv-white);
border: 1px solid var(--cv-border);
border-radius: 8px;
color: var(--cv-text-primary);
font: inherit;
}
.auth-card input:focus { outline: 2px solid var(--cv-accent); outline-offset: 1px; }
.auth-card .auth-remember { flex-direction: row; align-items: center; gap: 8px; color: var(--cv-text-secondary); }
.auth-card button[type=submit],
.auth-card button:not([id$=Cancel]) {
padding: 11px;
background: linear-gradient(135deg, var(--cv-accent), var(--cv-accent-dark));
border: 0; border-radius: 8px;
color: var(--cv-white); font-weight: 600; cursor: pointer;
}
.auth-card button:hover { filter: brightness(1.05); }
.auth-error {
background: rgba(220, 38, 38, 0.10); color: #b91c1c;
padding: 8px 10px; border-radius: 6px; font-size: 13px;
border: 1px solid rgba(220, 38, 38, 0.25);
}
.user-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 10px; border: 1px solid var(--cv-border);
border-radius: 999px; font-size: 12px;
background: var(--cv-white); color: var(--cv-text-primary);
}
.user-badge button { background: transparent; border: 0; color: var(--cv-accent-dark); cursor: pointer; padding: 0; }
.user-badge button:hover { text-decoration: underline; }
/* Users / audit admin view */
.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: #1a1d24; color: #e6e8ee; padding: 20px; border-radius: 10px; min-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.modal label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.modal-back { position: fixed; inset: 0; background: rgba(20,20,19,0.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal {
background: var(--cv-white); color: var(--cv-text-primary);
padding: 22px; border-radius: 12px; min-width: 340px;
border: 1px solid var(--cv-border);
box-shadow: var(--cv-shadow);
display: flex; flex-direction: column; gap: 12px;
}
.modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cv-text-secondary); }
.modal input { padding: 8px 10px; background: var(--cv-white); border: 1px solid var(--cv-border); border-radius: 6px; color: var(--cv-text-primary); font: inherit; }
.modal select { padding: 8px 10px; border: 1px solid var(--cv-border); border-radius: 6px; background: var(--cv-white); color: var(--cv-text-primary); font: inherit; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.users-view table { width: 100%; border-collapse: collapse; }
.users-view th, .users-view td { padding: 6px 8px; border-bottom: 1px solid #2a2f3a; text-align: left; }
.users-view th, .users-view td { padding: 8px 10px; border-bottom: 1px solid var(--cv-border); text-align: left; color: var(--cv-text-primary); }
.users-toolbar { margin: 12px 0; }

7
docs/changelog-develop.md
View File

@ -2,6 +2,13 @@
This file documents changes on the develop branch of this project.
## 2026-05-28 — Authentication: align login/setup/modal styling with site light theme
### Changed
- Login + setup pages and admin modals now use the site's light theme tokens (`--cv-page`, `--cv-surface`, `--cv-text-primary`, `--cv-accent`) instead of the dark placeholder palette.
- Input text uses `--cv-text-primary` so it is actually readable; buttons use the accent gradient.
- User badge / Users + Audit tables use the same border, surface, and text tokens as the rest of the app.
## 2026-05-28 — Authentication: feature complete
### Added