/* The sign-in popup's own styles, and the plain look it shares with the exams * picker. * * PORTAL-OWNED, UNLIKE main.css. That file is a build artefact of the * WordPress theme — byte-identical to ptheme-tw/assets/css/main.css, compiled * from its src/ by that project's Tailwind — so a rule added there by hand is * a rule the next `npm run build` over there silently deletes. Everything the * popup could reuse it does reuse: .auth-modal and its head, body and foot, * .acc-form, .acc-field, .acc-input, .acc-errors, .acc-go, .acc-code, * .acc-resend, .acc-methods, .acc-google, .btn-primary and .btn-outline are * all already in there, because the theme was designed for the four doors this * finally builds. What is below is only what it has no rule for. * * Same precedent as the desktop override in components/site/register-bar.blade.php: * the portal owns its own deviations, and this is the fourth sanctioned one * alongside the category landing, that popup, and the premium placements. */ /* ---------------------------------------------------------------------- * Centred on a desktop, and plain * * EVERY RULE IN THIS SECTION IS SCOPED TO [data-auth-plain] ON PURPOSE. The * .auth-modal vocabulary is worn by three dialogs — auth-modal, exams-modal * and details-modal — and details-modal is still the pixel-exact port. The * attribute is what says which of them opted in; dropping the scope would * restyle that one as a side effect of restyling these. * * The marker rather than a list of names because this is a look, not a * dialog: a fourth dialog wanting it should be able to say so in its own * markup instead of being added to a selector over here. * * main.css hangs the panel 7vh from the top of the viewport from 540px up, * which on a desktop leaves a short dialog sitting high with a lot of empty * page underneath. Centred, it reads as the only thing being asked. A tall * one loses nothing either: at its 86dvh ceiling the two rules land within a * pixel of each other, so this only moves the panel when it has room to move. * * Only from 1024px. Below that the panel is a bottom sheet (under 540px) or a * card on a screen it nearly fills, and neither has the room to spare. * -------------------------------------------------------------------- */ @media (min-width: 1024px) { [data-auth-plain] { justify-content: center; } [data-auth-plain] .auth-modal { margin: 0 auto; } } /* The brand stripe across the top and the wash behind the heading both go. With the mark gone from the head there is nothing left for them to frame, and a heading on plain white is what makes the three buttons under it the loudest thing in the dialog — which is the point of the screen. */ [data-auth-plain] .auth-modal::before { display: none; } [data-auth-plain] .auth-modal-head { background: #fff; } /* ---------------------------------------------------------------------- * A centred heading, and a little more room * * main.css opens the head's right padding to 58px to keep text clear of the * close button. That inset was reserving space beside a left-aligned heading; * a centred one does not pass through the corner the button sits in, so the * padding goes back to matching the left and the heading centres in the whole * width rather than in what is left of it. * * The max-width is the guard that makes that safe. The close button is * positioned, so it is not in the flow and cannot push a long title out of its * way — "Choose a new password" centred across the full panel would slide * under it. Capped, a title that long wraps instead, which .auth-modal-title * already balances. * -------------------------------------------------------------------- */ [data-auth-plain] .auth-modal-head { text-align: center; /* Below 540px the panel is only as wide as the phone is, and there the longest title — "Choose a new password" — centred across the full width runs under the close button: measured at 13px of overlap on a 320px screen. The button sits 12px in and is 34px across, so that much is reserved on BOTH sides. Both, because reserving it only on the right would centre the heading on what is left of the head rather than on the dialog, and a heading a few pixels off centre looks like a mistake where a narrower one does not. */ padding-inline: 46px; } [data-auth-plain] .auth-modal-heading { max-width: 320px; margin-inline: auto; } @media (min-width: 540px) { /* Wide enough to stop reserving it — the tightest door clears the button by 62px here — so the head goes back to the 22px main.css gives its left edge, and the cap above is what keeps a long title off the corner. */ [data-auth-plain] .auth-modal-head { padding-inline: 22px; } /* 452px was the width of a dialog with a logo beside its heading. Without one the panel can afford to be a touch wider, which buys the buttons inside it a longer line rather than buying the dialog more air. */ [data-auth-plain] .auth-modal { max-width: 480px; } } /* ---------------------------------------------------------------------- * The other ways in * * Stacked, full width, above the rule. .acc-google already has its own rule * in main.css and this only gives it something to sit in; .acc-provider is * the same control without Google's brand constraint, so it matches that * button exactly rather than inventing a second shape for a sibling. * -------------------------------------------------------------------- */ .acc-providers { display: flex; flex-direction: column; gap: 10px; } .acc-provider { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px 18px; border: 1px solid var(--color-line); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 600; color: var(--color-ink-800); text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* ---------------------------------------------------------------------- * The height of the Continue button * * .acc-go measures 48px: 12px of padding either side of a 24px line, on a * .btn-primary that spends nothing on a border. main.css builds .acc-google * from 11px of padding around a 1.2 line — 42px — and .acc-provider was * written to match it, so the two ways in stood 6px shorter than the way in * below them and read as the smaller, lesser option. They are not. * * 11 + 24 + 11 + 2px of border is the same 48. Only the line height moves: * the padding already allows for the border the primary button does not have, * so touching it would break the alignment rather than make it. * -------------------------------------------------------------------- */ .acc-google, .acc-provider { line-height: 24px; } /* ---------------------------------------------------------------------- * Pressing them * * main.css gives .acc-google a hover that only moves its border from * --color-line (#e2e6ed) to --color-ink-300 (#c7cdd9), and .acc-provider was * written to match it. Two greys twenty units apart on a one-pixel edge is a * change you have to be told about to see, and on the door where a reader * chooses between three ways in, "is this thing a button" should not be a * question. So the whole face fills instead. * * GREY, NOT BRAND BLUE. Google's terms fix the face of their button to white * or one of their own greys — a blue wash is not ours to apply — and their own * spec darkens it on hover. The phone and email buttons take the same fill * because the three have to keep reading as alternatives to each other; one of * them lighting up blue would look like the recommended one. * * NO BOX-SHADOW IN HERE, deliberately. Both buttons carry their focus ring in * box-shadow, and a hover that sets the property would erase the ring of a * button that is focused and hovered at once — which is exactly what a * keyboard reader reaching for the mouse does. Fill and border only, and the * :focus-visible rules stay below so their blue border wins over this one. * -------------------------------------------------------------------- */ .acc-google:hover, .acc-provider:hover { background: var(--color-ink-50); border-color: var(--color-ink-300); } /* Held down: one step darker, so the press is answered before the page is. */ .acc-google:active, .acc-provider:active { background: var(--color-ink-100); border-color: var(--color-ink-300); } /* main.css transitions .acc-google's border and shadow but not its face, so without this the fill above would snap on and fade out. */ .acc-google { transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* .acc-google's focus ring is declared in main.css, which the cascade reads before this file — so the hover border above would otherwise take a focused button's edge back to grey the moment a pointer crossed it. Restated here, after the hover, where it wins. (.acc-provider needs no equivalent: its own :focus-visible rule is further down this same file.) */ .acc-google:focus-visible { border-color: var(--color-brand-400); } .acc-provider:focus-visible { outline: none; border-color: var(--color-brand-400); box-shadow: 0 0 0 3px rgb(16 168 248 / 0.15); } .acc-provider .ptheme-icon { flex-shrink: 0; color: var(--color-ink-500); } /* ---------------------------------------------------------------------- * The phone field * * No country selector: every reader on this site is sitting an Indian state * exam, and a chooser with one plausible entry is a decision asked for no * reason. The prefix is a label rather than a control — it cannot be tabbed * to, cannot be changed, and is not part of what the field submits, which is * why Phone::digits() on the server sees ten digits and nothing else. * -------------------------------------------------------------------- */ .acc-tel { display: flex; align-items: stretch; width: 100%; } .acc-tel-cc { display: flex; flex-shrink: 0; align-items: center; padding: 0 12px; border: 1px solid var(--color-line); border-right: 0; border-radius: 10px 0 0 10px; background: var(--color-ink-50); font-size: 15px; font-weight: 600; color: var(--color-ink-500); /* It is not a field, so it must not read as one that has been disabled. */ user-select: none; } .acc-tel-input.acc-input { border-top-left-radius: 0; border-bottom-left-radius: 0; /* Wide enough that ten digits never scroll, which is the one thing that would make a reader doubt they typed the number right. */ letter-spacing: 0.02em; } /* The prefix follows the field's focus ring rather than sitting outside it — otherwise the two halves of one control light up separately. */ .acc-tel:focus-within .acc-tel-cc { border-color: var(--color-brand-400); box-shadow: -3px 0 0 0 rgb(16 168 248 / 0.15), 0 -3px 0 0 rgb(16 168 248 / 0.15), 0 3px 0 0 rgb(16 168 248 / 0.15); clip-path: inset(-3px 0 -3px -3px); } /* ---------------------------------------------------------------------- * A settings row that posts instead of linking * * /account/ asks for a password-reset letter rather than linking to a screen * that no longer exists, so one row of that list is a submit button inside a * form. display:contents keeps the button the same child of the list that the * anchor beside it is, so .acc-row's own rule still lays it out; the rest * undoes what a browser gives a