/* account.css - the Account block in Settings (include/parts/account.php) and * the two pages a link lands on, verify.php and reset.php. * * Loaded after narvoda.css, so the broad rules there win on source order. * Everything here is namespaced acct- to stay out of their way, which is the * same rule settings.css follows and for the same reason: a bare .row or .note * in here would reach into every card on the page. * * A page that uses the part MUST link this file. The part cannot link it * itself: it is dropped inside the Settings book, long after is written. */ .acct { display: grid; gap: 12px; } /* the address, and whether it is confirmed */ .acct-addr { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .acct-addr b { font-size: 17px; word-break: break-all; } .acct-tag { flex: 0 0 auto; padding: 1px 8px; border: 1px solid var(--gold-dark); border-radius: 10px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } .acct-tag-yes { color: #2f5d2f; border-color: #2f5d2f; background: rgba(47, 93, 47, .1); } .acct-tag-no { color: #8a2c2c; border-color: #8a2c2c; background: rgba(138, 44, 44, .1); } /* the pending address waiting on its link */ .acct-pending { margin: 0; font-size: 14px; color: var(--ivory-muted); } .acct-pending b { word-break: break-all; } /* when the last link went out, and when another one may be asked for. Same * quiet weight as .acct-pending, with a gold edge so the two lines about the * link read as one thing rather than as two more paragraphs. */ .acct-sent, .acct-wait { margin: 0; padding: 6px 10px; border-left: 2px solid var(--gold-dark); font-size: 14px; color: var(--ivory-muted); } .acct-sent b { color: var(--ivory); word-break: break-all; } /* forms inside the block, the same shape settings.css uses for .set-form */ .acct-form { display: grid; gap: 10px; margin: 0; } .acct-form label { display: grid; gap: 4px; font-size: 14px; } .acct-form input { width: 100%; } /* the fold-out Change my email box, CSS only: the page carries no inline * script by rule, so the summary is the switch */ .acct-more { border-top: 1px solid rgba(46, 28, 16, .25); padding-top: 10px; } .acct-more > summary { cursor: pointer; font-size: 14px; color: var(--gold-dark); list-style: none; } .acct-more > summary::-webkit-details-marker { display: none; } .acct-more > summary::before { content: "+ "; } .acct-more[open] > summary::before { content: "- "; } .acct-more > .acct-form { margin-top: 10px; } /* mail is not set up yet: said plainly instead of a button that cannot work */ .acct-off { margin: 0; padding: 8px 10px; border: 1px dashed var(--iron-light); border-radius: 4px; font-size: 14px; color: var(--ivory-muted); } /* the forgotten password fold-out under the Enter form on index.php. Sits * inside the gate card, so it keeps the card's own padding and only needs a * rule to separate itself from the line above. */ .gate-forgot { margin-top: 10px; border-top: 1px solid rgba(46, 28, 16, .25); padding-top: 10px; } .gate-forgot > summary { cursor: pointer; color: var(--gold-dark); list-style: none; } .gate-forgot > summary::-webkit-details-marker { display: none; } .gate-forgot > summary::before { content: "+ "; } .gate-forgot[open] > summary::before { content: "- "; } .gate-forgot .stack { margin-top: 10px; } .gate-forgot p { margin: 8px 0 0; } /* verify.php and reset.php: one card in the gate frame */ .acct-note { display: grid; gap: 10px; text-align: center; } .acct-note h2 { margin: 0; } .acct-note p { margin: 0; } .acct-bad { color: #8a2c2c; } .acct-go { margin-top: 4px; }