/** * Digits + Eduma popup - v5.1.18 * * Appearance / layout only. No authentication or timer logic lives here. * ----------------------------------------------------------------------- * v5.1.18: IP rate limits match Digits originals (multiplier default 1.0). * ----------------------------------------------------------------------- * v5.1.10: Version header aligned with theme 5.1.10 (rate-limit + * security-toggle polish in functions.php). * ----------------------------------------------------------------------- * v5.0.2: Ensure Resend OTP is visible on OTP step (styles for footer + * nested .digits-form_resend_otp). JS recovers Digits' native control * when Digits left it hidden. * ----------------------------------------------------------------------- * v5.0.1: OTP / forgot-password step – centre the (i) info icon on the * field, add input padding so text never sits under the icon, style the * Resend OTP link in the form footer, and (via JS) replace Digits' * "Email Passcode" placeholder with "Enter verification code". * ----------------------------------------------------------------------- * v5.0.1: "Lost your password?" is now injected on the initial email * step (same line as Remember Me, right-aligned). Digits only creates * its real link after Continue; the original footer link stays untouched. * ----------------------------------------------------------------------- * v4.9.10: corrects v4.9.9 which targeted the wrong Digits UI * (old "dig_lrf_box" classes) – see section 3f for the real NEW-UI structure. * ----------------------------------------------------------------------- * v4.9.9: second "Lost your password?" link on the login form, * right-aligned on the same line as Remember Me (section 3f). * ----------------------------------------------------------------------- * v4.9.7: replaces the v4.9.6 JS-timing fix below for the tab underline * with a simpler, strictly more reliable CSS-only one - see section 3d-2 * further down for the full writeup. Short version: this site only ever * renders a single tab, so there's nothing for Digits' JS-measured sliding * underline to slide between; a plain CSS border-bottom on the active tab * item is sized by the browser's normal layout and can never be * "measured too early" the way a JS getBoundingClientRect() read can. The * v4.9.6 transitionend-based JS fix is left in place (harmless, and still * useful for Turnstile/hCaptcha re-rendering on "digits_reposition"), it * just no longer matters for the underline specifically now that the * slider line is hidden via CSS. * * v4.9.6: fixes a real bug in the v4.9.5 underline fix below - it re-fired * Digits' "digits_reposition" only 50ms after the popup got its "active" * class, but #thim-popup-login opens via its own 300ms CSS * transform:scale(...)/opacity transition (parent theme's style.css: * "#thim-popup-login{...transform:scale(0.2,0.2);transition:all 0.3s * cubic-bezier(0.4,0,1,1)}" / "#thim-popup-login.active{transform: * scale(1,1)...}"). Digits measures the active tab's on-screen position * with getBoundingClientRect() (what jQuery's .offset()/.position() use), * and a CSS transform on an ancestor distorts getBoundingClientRect() for * every descendant for as long as that transform is still animating - so * the 50ms trigger measured mid-scale-animation and got a shrunk, wrong * width/position, which then stuck (baked into the underline's own fixed * px width/transform) even once the popup finished opening. This is also * why clicking the "Use Email Address" tab itself always "fixed" it: * Digits' own tab-click handler re-measures unconditionally, and by the * time a click happens the transition has long finished. * assets/digits-eduma.js now waits for the popup's own "transitionend" * before re-triggering "digits_reposition" (with a timeout fallback for * browsers/settings that skip or shorten the transition) instead of a * fixed too-short delay - no CSS-only fix is possible here since the * underline's position is computed in JS, not CSS. * * v4.9.5: two more fixes, both scoped to the login/register widget only. * - The "Use Email Address" underline (Digits' own JS-driven * ".digits-slider_line", assets/js/script.js -> moveTabSlider()) could * end up positioned away from the tab label. Digits measures the active * tab's position/width once on page load and again only on its own * "digits_reposition" event; but Eduma opens/closes this popup with a * CSS class toggle (#thim-popup-login.active), which Digits has no way * to know about, so the measurement taken while the popup was still * hidden/mid-transition never gets refreshed once it's actually shown. * assets/digits-eduma.js now triggers Digits' own "digits_reposition" * event when the popup opens (and once more after full page load, to * catch any late web-font size changes), so Digits re-measures against * the real, final layout - no CSS-only fix is possible here since the * underline's position is computed in JS, not CSS. * - Switching between the Digits widget's Login and Register views was an * instant show/hide with no transition, unlike Eduma's own native * login/register slide (see the removed ".thim-register" panel in * section 4 below, which used to slide via * ".sign-up .thim-popup-inner { transform: translateX(-100%) }" in the * parent theme). Section 6 below adds a matching fade+slide transition * for the real "Register Now" / "Login Now" links * (".dig_login_signup_bar a.digits-form_toggle_login_register", real * classes - verified in includes/forms/render.php), driven by * assets/digits-eduma.js since Digits' own click handler swaps * `display` instantly and CSS alone cannot animate that. * * v4.9.4: two small fixes, both in section 3d/3e below. * - The tab bar (".digits-form_tab-bar", real Digits class, verified in * assets/css/login.css) is a plain `display:flex` with no * justify-content, so Digits left-aligns it. That's invisible when two * tabs (phone + email) are shown, but this site only accepts email * login/registration, so Digits only ever prints ONE tab item ("Use * Email Address" - includes/forms/render.php, signup.php), which then * sits flush-left instead of reading as a centred heading. Centred with * `justify-content: center`. * - Eduma's own popup markup (thim_form_login_popup() in the parent * theme) prints a static "Login with your site account" heading above * the whole widget and never updates it, because that heading belongs * to Eduma's own register/login slide toggle, which functions.php * switches off in favour of Digits' single combined widget (see the * file-level PHP doc comment further down for why). Digits' own * internal heading updates fine when its "Register Now" link is * clicked, but that internal heading is hidden by section 2 below, so * the visible Eduma heading was left stuck on "Login with your site * account" even after switching to the Register panel. Fixed with a * small script (assets/digits-eduma.js) that listens for the same * click Digits itself listens for and swaps the Eduma heading text to * match - no changes needed inside the Digits plugin itself. * * v4.9.3: fixes a real regression from v4.9.1/v4.9.2 - see the "REMOVED in * v4.9.3" note in section 3c below for the full root-cause writeup. Short * version: forcing a fixed 52px height on the password field's row broke * the Register panel, where that row also contains a label above the * input, causing the password box to overflow and visually collide with * the Continue button underneath it. That forced height and its * accompanying icon-position override have been removed; Digits' own * unmodified CSS already positions the eye icon correctly without them. * Also tightened `.digits-form_input_row`'s margin-bottom (Digits' own * stock value, unrelated to the bug above) from 20px to 14px so field-to- * field spacing matches Eduma's rhythm elsewhere on the site. * * v4.9.0: v4.8.0 themed every colour Digits exposes as a CSS variable but * left two hardcoded values from Digits' own login.css untouched: an 8px * border-radius on every button/input, and no text-transform on the * button label. Both are Eduma theme-customizer variables everywhere * else on the site, so the form still looked visually "foreign" even * with colours matching. Section 3b below overrides just those two * properties with the same variables Eduma's own buttons/inputs use. * * Why this file looks different from v4.7.5: * Digits' "new UI" form (digits_render_new_form()) ships its own * well-built stylesheet (assets/css/login.css, always enqueued by the * plugin itself) that themes its buttons, tabs, focus states, checkboxes * etc. entirely through a handful of CSS custom properties: * --dprimary --dtitle --dfield_bg --daccent --dform_bg --dbutton_text * The previous version of this file never set those and instead tried to * !important-override class names such as .digits-form_footer_actions, * .dig_remember_me, .digits-form_or, .loginviasms - none of which exist * anywhere in the Digits plugin source, so none of those rules ever * matched anything. The real classes Digits renders are things like * .digits-form_rememberme, .digits-form_login_separator and * .dig_login_signup_bar (verified against includes/forms/render.php and * includes/wcs.php in the installed plugin). * * The fix here is mostly a handful of CSS variable overrides so Digits' * own CSS naturally matches the Eduma theme colour, plus a small number * of real layout tweaks to make the widget sit correctly inside the * Eduma login popup shell. */ :root { --eduma-digits-primary: var(--thim-body-primary-color, #ffb606); } /* ------------------------------------------------------------------------- * 1. Make Digits use the Eduma theme colour for everything it themes * itself (buttons, active tab, focus border, checkboxes, links, "or" * divider, register/login toggle text). This is the single biggest * fix: Digits' own login.css keys almost all of its colour off these * variables already. * ------------------------------------------------------------------------- */ .eduma-digits-form-wrap .digits-form_container { --dprimary: var(--eduma-digits-primary); --daccent: var(--eduma-digits-primary); --dbutton_text: #fff; --dtitle: var(--thim-font-title-color, #222); --dfield_bg: #f5f5f5; --dform_bg: transparent; } /* ------------------------------------------------------------------------- * 2. Fit the widget into the Eduma popup panel instead of Digits' own * fixed 400px modal width. * ------------------------------------------------------------------------- */ .eduma-digits-form-wrap, .eduma-digits-form-wrap .digits-form_container { width: 100%; max-width: 100%; box-sizing: border-box; padding: 0; } .eduma-digits-form-wrap .digits-form_wrapper { width: 100%; } /* Digits prints its own "Login" / "Register" / "Reset Password" heading * (.digits-form_heading) - Eduma already shows its own ".thim-login .title" * heading above this widget, so hide Digits' internal one to avoid a * duplicate title. */ .eduma-digits-form-wrap .digits-form_heading { display: none; } /* ------------------------------------------------------------------------- * 3. Small real-class fixes / spacing to match Eduma's rhythm. Every * selector below exists verbatim in the installed Digits plugin. * ------------------------------------------------------------------------- */ /* Divider between "Continue" and "Passwordless login" */ .eduma-digits-form-wrap .digits-form_login_separator { margin: 16px 0; } /* Field-to-field spacing. Digits' own login.css gives every * `.digits-form_input_row` (verified: assets/css/login.css) a flat * `margin-bottom: 20px` - this is Digits' stock spacing, not something * Eduma or this file previously changed, and on its own it isn't a bug. * With a 17px bold label sitting above each 52px input though, that 20px * gap reads as noticeably more than 20px of visual whitespace between * fields (First Name / Last Name / Email / Password), which is what * looked oversized on the Register panel. Tightened here to sit closer * to Eduma's own form rhythm elsewhere on the site. */ .eduma-digits-form-wrap .digits-form_input_row { margin-bottom: 14px; } /* Remember-me row (restored to its original, correct rule - v4.9.9's * first attempt at this wrongly zeroed this margin out and moved it to * ".digits_login_field_row", a class that only exists in Digits' OLD * "dig_lrf_box" renderer. This site actually renders the NEW UI * (digits_render_new_form(), verified against the real page markup - * ".digits2_box"/".digits-form_*" classes), which never prints that * wrapper at all, so that rule matched nothing and the zeroed margin * here was pure regression. See section 3f below for the real fix. */ .eduma-digits-form-wrap .digits-form_rememberme { margin: 12px 0 20px; } .eduma-digits-form-wrap .digits-form_rememberme .dig_input_wrapper { display: flex; align-items: center; gap: 8px; } /* ------------------------------------------------------------------------- * 3f. v4.9.9 (corrected): second "Lost your password?" / "Forgot * Password?" link, right-aligned on the same line as Remember Me. * * This site renders Digits' NEW UI (digits_render_new_form(), * includes/forms/render.php), confirmed against the actual page * markup - NOT the old "dig_lrf_box" UI the first pass of this * feature was (incorrectly) built against. In this UI: * - Remember Me (dig_rememberMe()) is wrapped in * ".digits_form-init_step_data", which Digits' own login.css * hides by default and only shows while the form still carries * ".digits_form_index_section" (i.e. the very first email/phone * step) - assets/js/script.js removes that class the moment the * user continues to the password step, hiding Remember Me again. * - The "Forgot Password?" link (".digits-form_show_forgot_password", * includes/forms/handler/process.php password_tab()) does not * exist in the DOM at all until AFTER that same "Continue" step, * when Digits' own AJAX response adds the password field and * copies that link into the persistent ".digits-form_footer" box * further down the form (assets/js/script.js * update_form_footer()) - nowhere near Remember Me. * So on page load neither element is in a state where they could * ever sit on one line together; getting them side by side needs * two things, both handled here/in the JS: * 1. Keep Remember Me visible past the first step (below), instead * of only for as long as ".digits_form_index_section" is present. * 2. In assets/digits-eduma.js, watch ".digits-form_footer" and, the * moment Digits' own JS drops the real "Forgot Password?" link * into it, clone that link (same classes, so Digits' existing * delegated click handler still fires on it) into the Remember * Me row. The original link inside ".digits-form_footer" is * left exactly as Digits put it - never removed or moved. * ------------------------------------------------------------------------- */ .eduma-digits-form-wrap form.digits_form_index_section .digits_form-init_step_data { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 20px; } .eduma-digits-form-wrap .digits_form-init_step_data .digits-form_rememberme { margin: 0; } .eduma-digits-form-wrap .digits_form-init_step_data .eduma-lost-pass-inline { color: var(--eduma-digits-primary); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; } .eduma-digits-form-wrap .digits_form-init_step_data .eduma-lost-pass-inline:hover { text-decoration: underline; } /* "Not a member yet? Register Now" / "Already a member? Login Now" */ .eduma-digits-form-wrap .dig_login_signup_bar { text-align: center; font-size: 15px; } .eduma-digits-form-wrap .dig_login_signup_bar a { color: var(--eduma-digits-primary); } /* Submit buttons already inherit --dprimary/--dbutton_text; just make sure * they don't fight Eduma's own global "button" rules for height/margin. */ .eduma-digits-form-wrap .digits-form_button { margin: 0 0 4px; } /* ------------------------------------------------------------------------- * 3b. Digits' own login.css hardcodes an 8px pill radius on every button * and input (.digits-form_button, .digits-form_input input) and never * applies a text-transform to the button label - verified in * assets/css/login.css. Eduma's own buttons/inputs everywhere else on * the site key both of those off theme customizer variables * (--thim-border-radius-button / --thim-font-button-text-transform), * so without this the Digits form is the one rounded, lowercase button * on an otherwise square, uppercase-button site. Override with the * same variables Eduma's own markup uses, so it inherits whatever the * customizer is set to instead of Digits' fixed 8px/none. * ------------------------------------------------------------------------- */ .eduma-digits-form-wrap .digits-form_button, .eduma-digits-form-wrap .digits-form_input input, .eduma-digits-form-wrap .digits-form_input textarea { border-radius: var(--thim-border-radius-button, 0); } .eduma-digits-form-wrap .digits-form_button-text { text-transform: var(--thim-font-button-text-transform); } /* ------------------------------------------------------------------------- * 3c. REMOVED in v4.9.3 - this was a real bug, not a fix. * * v4.9.1/v4.9.2 forced `height: 52px` on any `.digits-form_input_row` * containing the password eye icon, to give a percentage `top` something * definite to resolve against. That reasoning only holds for rows whose * ONLY content is the 52px input - true for the login-flow password field * (includes/forms/handler/process.php: password_tab(), no label). * * It is NOT true for the register form's password row (includes/forms/ * signup.php: field_render(), "dig_cs_password"), which prints a *