Files
immich-folio/components/PasswordGate.module.css
Ralksta ad8b09700b release: v0.19.0
Release v0.19.0. See the `## [0.19.0] — 2026-09-29` section of
[CHANGELOG.md](https://github.com/ralksta/immich-folio/blob/dev/CHANGELOG.md)
for the full list.

Highlights: client proofing links (#683), custom content pages (#738),
asset picker search (#740), concurrent-edit detection (#742), env-locked
settings (#739), an accessibility baseline (#741), three security fixes
with advisories (#737, #755, #759), and a pre-release quality pass
(#780–#797).

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: ralksta <ralksta@users.noreply.github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Ralf <rohlenbo79@gmail.com>
Co-authored-by: Paul Thies <110185070+ImScheinox@users.noreply.github.com>
Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com>
Co-authored-by: Lance Martin <lancetaylor95@gmail.com>
2026-09-29 22:50:30 +02:00

123 lines
2.5 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* ── Password Gate Module ─────────────────────────── */
.gate {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--header-height));
padding: 24px;
}
.card {
text-align: center;
padding: 48px 40px;
max-width: 400px;
width: 100%;
background: var(--bg-secondary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
}
.title {
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 400;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.subtitle {
font-size: 0.85rem;
color: var(--text-secondary);
font-weight: 300;
margin-bottom: 32px;
}
.form {
display: flex;
flex-direction: column;
gap: 12px;
}
.input {
width: 100%;
padding: 12px 16px;
background: var(--bg-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 0.9rem;
transition: border-color var(--transition-fast);
}
/* The base rule used to set `outline: none`, leaving a 1px border colour
change as the only focus signal. That is too little on a page whose only
purpose is typing, and a colour-only cue can be lost on colour-blind
visitors. The border change stays; the ring is added. */
.input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-color: var(--accent);
}
.input::placeholder {
color: var(--text-muted);
}
.button {
padding: 12px 24px;
background: var(--accent);
color: var(--on-accent);
border: none;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.05em;
cursor: pointer;
transition: opacity var(--transition-fast);
}
.button:hover {
opacity: 0.9;
}
.button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.error {
margin-top: 12px;
font-size: 0.8rem;
/* Per-mode token; the fixed red it replaces measured 3.2–3.6:1 on the
light presets. */
color: var(--error);
font-weight: 400;
}
.spinner {
animation: spin 1s linear infinite;
display: inline-block;
margin-right: 8px;
vertical-align: middle;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ── Responsive ──────────────────────────────────── */
@media (max-width: 640px) {
.card {
padding: 36px 24px;
}
}