Files
www/htdocs/static/membership.css
T
claudeandClaude Opus 5.5 d73f7d1b80 Profile: only edit fields Dex reads back
The Dex LDAP connector publishes uid, cn and mail as claims, so the
profile page now offers just Name (cn), the verified email change and
the password. The photo endpoint, SSH keys, addresses, phones and
other extended attributes are no longer read or written; existing LDAP
values are left untouched. Apache's profile upload limit drops back to
the 256 KiB used by other member routes.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-06 21:42:57 -05:00

81 lines
7.3 KiB
CSS
Executable File

.member-nav, .member-main, .member-footer { width: min(1160px, calc(100% - 3rem)); margin-inline: auto; }
.member-nav { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding-block: 1.5rem; border-bottom: 1px solid var(--border); }
.member-nav .brand { font-size: 1.5rem; font-weight: 800; color: var(--text); text-decoration: none; }
.member-nav nav { display: flex; gap: 1.5rem; }
.member-main { padding-bottom: 4rem; }
.member-hero { padding-block: clamp(3rem, 8vw, 6rem); }
.member-hero h1 { font-size: clamp(2.8rem, 6vw, 5rem); max-width: 900px; }
.member-count { color: var(--muted); font-size: 1.1rem; }
.member-count strong { color: var(--accent-strong); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.member-intro { max-width: 700px; color: var(--muted); font-size: 1.2rem; }
.member-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.member-actions form { margin: 0; }
button.button { cursor: pointer; font-size: inherit; line-height: inherit; }
.member-panel { padding: 2rem; border: 1px solid var(--border); border-radius: 1.3rem; background: var(--surface); }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1.5rem; }
.service-access-panel { margin-bottom: 1.5rem; }
.service-access-panel h3 { margin-bottom: .8rem; }
.service-access-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: .6rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.service-access-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .8rem; padding-block: .35rem; border-bottom: 1px solid var(--border); }
.service-access-link { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; }
.service-access-link:hover { color: var(--accent-strong); }
.service-access-link img { width: 1.75rem; height: 1.75rem; object-fit: contain; border-radius: .35rem; }
.service-access-list span { color: var(--muted); }
.tier-card { display: flex; flex-direction: column; border-top: 3px solid var(--accent); }
.free-tier { border-top-color: var(--green); }
.tier-card h3 { font-size: 1.8rem; }
.tier-card ul { padding-left: 1.2rem; margin-bottom: 2rem; color: var(--muted); }
.tier-card > form, .tier-card > .button, .tier-footnote { margin-top: auto; }
.tier-payment-actions { display: grid; gap: .8rem; margin-top: auto; }
.form-panel select { width: 100%; padding: .8rem 1rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--page-deep); color: var(--text); font: inherit; }
.crypto-details dt { margin-top: 1rem; color: var(--muted); font-size: .9rem; }
.crypto-details dd { margin: .2rem 0; overflow-wrap: anywhere; }
.tier-price { color: var(--text); font-size: 1.8rem; font-weight: 700; }
.tier-price span { font-size: 1rem; font-weight: 400; color: var(--muted); }
.tier-card .button { width: 100%; text-align: center; }
.account-panel { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; }
.account-panel h2, .account-panel p { margin-bottom: .5rem; }
.member-notice { margin-top: 1rem; padding: 1rem 1.3rem; border-left: 3px solid var(--green); background: var(--surface); border-radius: .3rem; }
.member-small, .member-footer { color: var(--muted); font-size: .9rem; }
.form-panel { max-width: 630px; margin: 4rem auto; }
.form-panel h1 { font-size: clamp(2rem, 5vw, 3rem); }
.form-panel label { display: block; margin-bottom: .3rem; font-weight: 600; }
.form-panel input { width: 100%; padding: .8rem 1rem; border-radius: .6rem; border: 1px solid var(--border); background: var(--page-deep); color: var(--text); font: inherit; }
.form-panel p:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: flex-start; gap: .6rem; }
.form-panel p:has(> input[type="checkbox"]) label { margin: 0; font-weight: 500; }
.form-panel input[type="checkbox"] { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .2rem; padding: 0; accent-color: var(--accent); }
.form-panel input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-panel .helptext { display: block; color: var(--muted); font-size: .85rem; margin-top: .4rem; }
.errorlist { color: var(--red); }
.member-faq { margin-top: 4rem; max-width: 800px; }
.member-faq details { padding: 1rem 0; border-bottom: 1px solid var(--border); }
.member-faq summary { cursor: pointer; font-weight: 600; }
.member-faq details p { color: var(--muted); margin: 1rem 0 .5rem; }
.member-footer { padding-block: 2rem; border-top: 1px solid var(--border); }
@media (max-width: 540px) { .member-nav, .member-main, .member-footer { width: calc(100% - 2rem); } .member-nav nav { gap: .8rem; font-size: .85rem; } .member-panel { padding: 1.4rem; } .member-actions { align-items: stretch; flex-direction: column; } .member-actions .button { width: 100%; } }
/* Shared-account profile: use the home page's Catppuccin theme variables. */
.profile-main { max-width: 880px; }
.profile-heading { padding-block: clamp(2rem, 6vw, 4rem) 1rem; }
.profile-heading h1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.profile-heading > p { max-width: 70ch; }
.profile-jump-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-block: 1rem 2rem; }
.profile-jump-links a { padding: .45rem .85rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); text-decoration: none; }
.profile-section { min-width: 0; margin: 0 0 1.5rem; scroll-margin-top: 2rem; }
.profile-section legend { padding-inline: .5rem; color: var(--accent); font-size: 1.35rem; font-weight: 700; }
.profile-section h2, .profile-errors h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.profile-field { min-width: 0; margin-block: 0 1.5rem; }
.profile-field label { display: inline-block; margin-bottom: .35rem; font-weight: 650; }
.profile-required { color: var(--muted); font-size: .85rem; }
.profile-field input:not([type="checkbox"]), .profile-field textarea { display: block; width: 100%; min-width: 0; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: .65rem; background: var(--page-deep); color: var(--text); font: inherit; }
.profile-field textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }
.profile-field input:focus-visible, .profile-field textarea:focus-visible, .profile-section button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.profile-field .helptext { margin-block: 0 .6rem; color: var(--muted); font-size: .9rem; }
.profile-field-invalid input, .profile-field-invalid textarea, .profile-field [aria-invalid="true"] { border-color: var(--red); }
.profile-errors { margin-block: 1rem 1.5rem; padding: 1.25rem; border: 1px solid var(--red); border-radius: .8rem; background: var(--surface); }
.profile-field .errorlist { margin-block: .5rem 0; padding-left: 1.25rem; }
.profile-email-values { padding-left: 1.4rem; overflow-wrap: anywhere; }
.profile-back { margin-top: 2rem; }
@media (max-width: 540px) { .profile-section { padding: 1.1rem; } .profile-section .button { width: 100%; } .profile-jump-links { gap: .45rem; } .profile-jump-links a { font-size: .9rem; } }
@media (prefers-reduced-motion: reduce) { html:has(.profile-main) { scroll-behavior: auto; } }