/*
* MC LearnPress UI — LearnPress component overrides
* Handle: mc-lp-lp-overrides. Depends on: mc-lp-tokens (tokens.css) ONLY.
*
* base.css is deliberately NOT a dependency: LearnPress prints its confirm
* dialog on `wp_print_footer_scripts` (learnpress/inc/class-lp-assets.php:21,
* :488-504), so it can appear on pages where the screen stylesheets are not
* enqueued. Everything this file needs — focus rings, button look, font stack —
* is therefore restated here from tokens rather than inherited from base.css.
*
* ============================================================================
* SCOPE — why `.mc-lp` works here
* ============================================================================
* `.mc-lp` is a BODY class, added by MC_LP_Assets::body_class()
* (includes/class-mc-lp-assets.php, `add_filter( 'body_class', ... )`).
* That matters: the overlay markup is echoed at the very end of , well
* outside any theme content wrapper, so a wrapper-scoped selector would never
* reach it. A body-scoped one does.
*
* ============================================================================
* THE TWO DIALOG FAMILIES LEARNPRESS ACTUALLY EMITS
* ============================================================================
*
* FAMILY A — the jQuery overlay. This is the one in the bug report
* (`إكمال الدرس` / نعم / لا). Markup, verbatim, from
* learnpress/templates/global/lp-modal-overlay.php:14-27, wrapped by
* learnpress/inc/class-lp-assets.php:501-503:
*
*
<- :501, backdrop
*
<- template :14
*
<- :15
*
<- :16
*
…
<- :17
*
*
<- :19
*
<- :20
*
…
<- injected by JS
*
*
*
*
*
*
*
* The `.pd-2em` wrapper around the message is added at runtime by
* learnpress/assets/src/apps/js/frontend/show-lp-overlay-complete-item.js:31
* and :46. Title and body text come from the form's data-title / data-confirm.
*
* Dialogs that route through Family A:
* - Complete lesson `.lp-btn-complete-item` show-lp-overlay-complete-item.js:16-35
* (form: templates/content-lesson/button-complete.php:58)
* - Finish course `.lp-btn-finish-course` show-lp-overlay-complete-item.js:38-50
* (form: templates/single-course/buttons/finish.php:15)
* - Retake course inc/TemplateHooks/UserItem/UserCourseTemplate.php:148
* - Retry / retake templates/single-course/buttons/retry.php:33
* - Repurchase course frontend/single-course.js:204-215
* All are gated by the `enable_popup_confirm_finish` option
* (inc/class-lp-assets.php:497).
*
* FAMILY B — the React modal used by the quiz app. Markup from
* learnpress/assets/src/apps/js/frontend/modal/index.js:33-51, mounted at
* frontend/quiz.js:52 (``), driven by the
* `learnpress/modal` store. Verified against the shipped bundle
* learnpress/assets/js/dist/frontend/modal.js:
*
* <- index.js:36
*
<- :37
*
…
<- :38
*
<- :39
*
*
*
* Dialogs that route through Family B: start quiz, submit/finish quiz, retake
* quiz (frontend/quiz/components/buttons/index.js:15,:104 and
* frontend/quiz/components/status/index.js:53 all call the store's `confirm`).
*
* ============================================================================
* WHAT WAS OFF-BRAND
* ============================================================================
* The violet is LearnPress's own, in two places, identical in both the LTR and
* RTL builds:
* learnpress/assets/css/learnpress.css:8053 .lp-modal-dialog .lp-modal-header { background: #7c60d9 }
* learnpress/assets/css/learnpress.css:8077 .lp-modal-dialog .btn-yes { background-color: #7c60d9 }
* (same rules at the same lines in learnpress-rtl.css:8053 / :8077)
*
* ============================================================================
* SPECIFICITY — read before adding a rule here
* ============================================================================
* Family A is entirely class-based; LearnPress's deepest selector is
* `.lp-modal-dialog .lp-modal-body .main-content .pd-2em` (0,0,4,0), so each
* rule below simply prefixes `.mc-lp` to out-weigh its counterpart.
*
* Family B is ID-based, and an ID beats any number of classes — a plain class
* rule loses silently. Every Family B rule below therefore repeats LearnPress's
* full ID chain and adds `.mc-lp` on top. Each is annotated with the LearnPress
* selector it must beat and the resulting weights.
*
* NO `!important` IS USED ANYWHERE IN THIS FILE. Every override wins on
* specificity alone.
*
* INLINE STYLES — do not fight these. React writes `display:block|none` inline
* on #lp-modal-overlay and #lp-modal-window (modal/index.js:29-31,:36-37), and
* jQuery `.show()`/`.hide()` writes it inline on `.lp-overlay`
* (utils/lp-modal-overlay.js:32,:24). Inline styles beat everything short of
* `!important`, so this sheet never sets `display` on those three elements —
* doing so would either be a no-op or break open/close.
*
* ============================================================================
* RTL
* ============================================================================
* Logical properties throughout — no physical left/right anywhere in this file.
* This also repairs two LearnPress bugs: `.lp-modal-content` is hard-coded
* `text-align: left` (learnpress.css:8038) and `.lp-modal-footer`
* `text-align: right` (:8073). Those are only correct if WordPress swaps in the
* -rtl build; if the LTR sheet loads on an Arabic page the dialog reads wrong.
* Using `start`/`end` and flexbox makes it correct under either build.
* ============================================================================
*/
/* ==========================================================================
Shared — local scrim token
========================================================================== */
.mc-lp {
/*
* Backdrop tint. tokens.css has no scrim token, and alpha cannot be applied
* to an existing var() without color-mix(), so this is --mc-color-dark-blue
* (#0c275e) written out with an alpha channel. Kept as a local custom
* property so both dialog families share one value.
*/
--mc-lp-scrim: rgba(12, 39, 94, 0.55);
}
/* ==========================================================================
FAMILY A — .lp-overlay / .lp-modal-dialog
Complete lesson · finish course · retake course · retry · repurchase
========================================================================== */
/* Backdrop.
Beats `.lp-overlay` (0,0,1,0) — learnpress.css:7991 — with (0,0,2,0).
`display` is intentionally not set: jQuery drives it inline. */
.mc-lp .lp-overlay {
background-color: var(--mc-lp-scrim);
/* LearnPress sets top/right/bottom/left:0 here; restated logically. */
inset-block: 0;
inset-inline: 0;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/* Centring container.
Beats `.lp-modal-dialog` (0,0,1,0) — learnpress.css:8014 — with (0,0,2,0). */
.mc-lp .lp-modal-dialog {
box-sizing: border-box;
inset-block-start: 0;
inset-inline: 0;
min-block-size: 100vh;
/* Gutter so the card never touches the viewport edge on small screens. */
padding: var(--mc-space-4);
font-family: var(--mc-font-family);
}
.mc-lp .lp-modal-dialog *,
.mc-lp .lp-modal-dialog *::before,
.mc-lp .lp-modal-dialog *::after {
box-sizing: border-box;
}
/* The card.
Beats `.lp-modal-dialog .lp-modal-content` (0,0,2,0) — learnpress.css:8031 —
with (0,0,3,0). Overrides its `text-align: left`. */
.mc-lp .lp-modal-dialog .lp-modal-content {
inline-size: 100%;
max-inline-size: 480px;
max-block-size: calc(100vh - var(--mc-space-8));
border: 1px solid var(--mc-color-border);
border-radius: var(--mc-radius-lg);
background: var(--mc-color-bg);
box-shadow: var(--mc-shadow-lg);
color: var(--mc-color-text);
text-align: start;
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-body);
}
/* Header bar — was #7c60d9 violet (learnpress.css:8053), now brand navy.
Beats `.lp-modal-dialog .lp-modal-header` (0,0,2,0) with (0,0,3,0). */
.mc-lp .lp-modal-dialog .lp-modal-header {
padding-block: var(--mc-space-4);
padding-inline: var(--mc-space-6);
border-block-end: 1px solid var(--mc-color-primary-hover);
background: var(--mc-color-primary);
/* Yellow hairline ties the dialog to the brand accent. */
box-shadow: inset 0 -3px 0 0 var(--mc-color-accent);
border-start-start-radius: var(--mc-radius-lg);
border-start-end-radius: var(--mc-radius-lg);
}
/* Title. Beats `.lp-modal-dialog .lp-modal-header h3` (0,0,2,1) —
learnpress.css:8057 — with (0,0,3,1). White on #0f3176 is ~11.9:1, AAA. */
.mc-lp .lp-modal-dialog .lp-modal-header h3.modal-title {
margin: 0;
color: var(--mc-color-text-invert);
font-family: var(--mc-font-family);
font-size: var(--mc-font-size-lg);
line-height: var(--mc-leading-lg);
font-weight: var(--mc-font-weight-semibold);
text-align: start;
}
/* Scrollable body.
Beats `.lp-modal-dialog .lp-modal-body .main-content` (0,0,3,0) —
learnpress.css:8062 — with (0,0,4,0). */
.mc-lp .lp-modal-dialog .lp-modal-body .main-content {
max-block-size: min(60vh, 500px);
color: var(--mc-color-text);
text-align: start;
}
/*
* Message padding. LearnPress pads `.pd-2em` (and h2/h3) at
* learnpress.css:8067-8069 with a 4-class selector (0,0,4,0), so this needs
* (0,0,5,0) to win — one of the two places in this file where the LearnPress
* selector is deep enough to need the full chain spelled out.
*/
.mc-lp .lp-modal-dialog .lp-modal-body .main-content .pd-2em,
.mc-lp .lp-modal-dialog .lp-modal-body .main-content h2,
.mc-lp .lp-modal-dialog .lp-modal-body .main-content h3 {
padding-block: var(--mc-space-6);
padding-inline: var(--mc-space-6);
margin: 0;
color: var(--mc-color-text);
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-body);
text-align: start;
/* Long slugs like "modulation_(2g-5g)" must not blow out the card. */
overflow-wrap: anywhere;
}
/* Footer.
Beats `.lp-modal-dialog .lp-modal-footer` (0,0,2,0) — learnpress.css:8070 —
with (0,0,3,0). Flexbox replaces the physical `text-align: right`, so the
actions sit at the inline end under both LTR and RTL without a direction
query. Source order (No, Yes) is preserved so tab order matches paint order. */
.mc-lp .lp-modal-dialog .lp-modal-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--mc-space-3);
padding-block: var(--mc-space-4);
padding-inline: var(--mc-space-6);
border-block-start: 1px solid var(--mc-color-border);
background-color: var(--mc-color-surface);
border-end-start-radius: var(--mc-radius-lg);
border-end-end-radius: var(--mc-radius-lg);
}
/* Shared button shape for both actions — mirrors `.mc-btn` from base.css.
Beats `.lp-button` (0,0,1,0) — learnpress.css:348 — with (0,0,3,0). */
.mc-lp .lp-modal-dialog .lp-modal-footer .lp-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mc-space-2);
min-block-size: var(--mc-btn-height);
min-inline-size: 96px;
margin: 0;
padding-block: var(--mc-space-2);
padding-inline: var(--mc-space-6);
border: 1px solid transparent;
border-radius: var(--mc-radius-md);
font-family: var(--mc-font-family);
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-base);
font-weight: var(--mc-font-weight-semibold);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--mc-transition-fast),
border-color var(--mc-transition-fast),
color var(--mc-transition-fast);
}
/* Primary action (نعم / Yes) — was #7c60d9 (learnpress.css:8075-8078).
Beats `.lp-modal-dialog .btn-yes` (0,0,2,0) with (0,0,3,0). */
.mc-lp .lp-modal-dialog .btn-yes {
border-color: var(--mc-color-primary);
background-color: var(--mc-color-primary);
color: var(--mc-color-text-invert);
}
.mc-lp .lp-modal-dialog .btn-yes:hover,
.mc-lp .lp-modal-dialog .btn-yes:focus-visible {
border-color: var(--mc-color-primary-hover);
background-color: var(--mc-color-primary-hover);
color: var(--mc-color-text-invert);
}
/* Secondary action (لا / No) — outlined, mirrors `.mc-btn--secondary`.
(0,0,3,0) beats the `.lp-button` base at (0,0,1,0). */
.mc-lp .lp-modal-dialog .btn-no {
border-color: var(--mc-color-primary);
background-color: transparent;
color: var(--mc-color-primary);
}
.mc-lp .lp-modal-dialog .btn-no:hover,
.mc-lp .lp-modal-dialog .btn-no:focus-visible {
border-color: var(--mc-color-primary-hover);
background-color: var(--mc-color-surface-alt);
color: var(--mc-color-primary-hover);
}
/* ==========================================================================
FAMILY B — #lp-modal-overlay / #lp-modal-window
Quiz: start · submit · retake
Every rule here carries LearnPress's full ID chain plus `.mc-lp`, because an
ID (0,1,0,0) outranks any number of classes.
========================================================================== */
/* Backdrop. Beats `#lp-modal-overlay` (0,1,0,0) — learnpress.css:8080 — with
(0,1,1,0). LearnPress used `opacity:.5` over solid #000; that is reset to 1
and the tint moved into the colour so the scrim matches Family A.
`display` is left alone — React writes it inline. */
.mc-lp #lp-modal-overlay {
inset-block: 0;
inset-inline: 0;
opacity: 1;
background: var(--mc-lp-scrim);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
/*
* The card. Beats `#lp-modal-window` (0,1,0,0) — learnpress.css:8092 — with
* (0,1,1,0).
*
* LearnPress centres this with `top:50%; left:50%; transform:translate(-50%,-50%)`.
* `left` is physical, and the logical equivalent (`inset-inline-start:50%`)
* would break in RTL because `transform` is not direction-aware — it would push
* the card further toward the same edge instead of back to centre. The
* all-insets-zero + `margin:auto` idiom centres on both axes with no physical
* property and no transform, so it is correct in both directions.
*/
.mc-lp #lp-modal-window {
box-sizing: border-box;
inset-block: 0;
inset-inline: 0;
margin: auto;
transform: none;
inline-size: fit-content;
block-size: fit-content;
max-inline-size: min(480px, calc(100% - var(--mc-space-8)));
max-block-size: calc(100vh - var(--mc-space-8));
overflow: auto;
padding-block: var(--mc-space-8);
padding-inline: var(--mc-space-8);
border: 1px solid var(--mc-color-border);
border-radius: var(--mc-radius-lg);
background: var(--mc-color-bg);
box-shadow: var(--mc-shadow-lg);
font-family: var(--mc-font-family);
}
.mc-lp #lp-modal-window *,
.mc-lp #lp-modal-window *::before,
.mc-lp #lp-modal-window *::after {
box-sizing: border-box;
}
/* Message. Beats `#lp-modal-window #lp-modal-content` (0,2,0,0) —
learnpress.css:8105 — with (0,2,1,0). */
.mc-lp #lp-modal-window #lp-modal-content {
margin-block: 0 var(--mc-space-6);
margin-inline: 0;
color: var(--mc-color-text);
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-body);
font-weight: var(--mc-font-weight-regular);
text-align: center;
overflow-wrap: anywhere;
}
/* Beats `#lp-modal-window #lp-modal-content > *` (0,2,0,0) — learnpress.css:8111
— with (0,2,1,0). */
.mc-lp #lp-modal-window #lp-modal-content > * {
margin-block: 0 var(--mc-space-2);
margin-inline: 0;
}
.mc-lp #lp-modal-window #lp-modal-content > *:last-child {
margin-block-end: 0;
}
/* Button row. Beats `#lp-modal-window #lp-modal-buttons` (0,2,0,0) —
learnpress.css:8114 — with (0,2,1,0). `row-reverse` is LearnPress's own
(the DOM order is OK then Cancel); it is kept so paint order is unchanged. */
.mc-lp #lp-modal-window #lp-modal-buttons {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--mc-space-3);
}
/*
* Buttons. This is the highest-specificity selector LearnPress has in either
* family: `#lp-modal-window #lp-modal-buttons .lp-button` is (0,2,1,0)
* (learnpress.css:8120), so this needs (0,2,2,0). The `margin: 0 10px` there is
* physical and is replaced by the row `gap` above.
*/
.mc-lp #lp-modal-window #lp-modal-buttons .lp-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--mc-space-2);
position: relative;
min-block-size: var(--mc-btn-height);
min-inline-size: 96px;
margin: 0;
padding-block: var(--mc-space-2);
padding-inline: var(--mc-space-6);
border: 1px solid transparent;
border-radius: var(--mc-radius-md);
font-family: var(--mc-font-family);
font-size: var(--mc-font-size-base);
line-height: var(--mc-leading-base);
font-weight: var(--mc-font-weight-semibold);
text-align: center;
cursor: pointer;
transition: background-color var(--mc-transition-fast),
border-color var(--mc-transition-fast),
color var(--mc-transition-fast);
}
/* Primary (OK). (0,2,2,0) — matches the chain above and adds the modifier. */
.mc-lp #lp-modal-window #lp-modal-buttons .modal-button-ok {
border-color: var(--mc-color-primary);
background-color: var(--mc-color-primary);
color: var(--mc-color-text-invert);
}
.mc-lp #lp-modal-window #lp-modal-buttons .modal-button-ok:hover,
.mc-lp #lp-modal-window #lp-modal-buttons .modal-button-ok:focus-visible {
border-color: var(--mc-color-primary-hover);
background-color: var(--mc-color-primary-hover);
color: var(--mc-color-text-invert);
}
/* Secondary (Cancel). */
.mc-lp #lp-modal-window #lp-modal-buttons .modal-button-cancel {
border-color: var(--mc-color-primary);
background-color: transparent;
color: var(--mc-color-primary);
}
.mc-lp #lp-modal-window #lp-modal-buttons .modal-button-cancel:hover,
.mc-lp #lp-modal-window #lp-modal-buttons .modal-button-cancel:focus-visible {
border-color: var(--mc-color-primary-hover);
background-color: var(--mc-color-surface-alt);
color: var(--mc-color-primary-hover);
}
/* The buttons wrap their label in a (modal/index.js:41,:44) — make sure
nothing in the theme shrinks or recolours it. */
.mc-lp #lp-modal-window #lp-modal-buttons .lp-button > span {
color: inherit;
font: inherit;
}
/* ==========================================================================
Focus — restated locally because base.css may not be on the page.
Outlines are never removed; offset keeps the ring clear of the fill.
========================================================================== */
.mc-lp .lp-modal-dialog .lp-button:focus-visible,
.mc-lp #lp-modal-window #lp-modal-buttons .lp-button:focus-visible {
outline: 2px solid var(--mc-color-focus);
outline-offset: 2px;
}
/*
* The footer sits on --mc-color-surface (#f1f5f9) and the quiz card on white,
* so the #0045ff focus ring clears AA non-text contrast (3:1) against both.
* Fallback for engines without :focus-visible — never hide the ring.
*/
.mc-lp .lp-modal-dialog .lp-button:focus,
.mc-lp #lp-modal-window #lp-modal-buttons .lp-button:focus {
outline: 2px solid var(--mc-color-focus);
outline-offset: 2px;
}
.mc-lp .lp-modal-dialog .lp-button:focus:not(:focus-visible),
.mc-lp #lp-modal-window #lp-modal-buttons .lp-button:focus:not(:focus-visible) {
outline: none;
}
/* ==========================================================================
Motion
========================================================================== */
@media (prefers-reduced-motion: reduce) {
/* Also neutralises LearnPress's own 150ms opacity transition on the
backdrop (learnpress.css:8002-8004). */
.mc-lp .lp-overlay,
.mc-lp .lp-modal-dialog .lp-button,
.mc-lp #lp-modal-window #lp-modal-buttons .lp-button {
transition: none;
}
}
/* ==========================================================================
Small screens — below sm (640px), stack the actions full-width so the tap
targets are comfortable. Breakpoint hard-coded per tokens.css guidance.
========================================================================== */
@media (max-width: 639px) {
.mc-lp .lp-modal-dialog .lp-modal-footer {
/* `column`, not `column-reverse`: reversing would put نعم above لا but
leave tab order as (No, Yes), breaking the paint/focus-order match
this file preserves everywhere else (WCAG 2.4.3). */
flex-direction: column;
align-items: stretch;
}
.mc-lp .lp-modal-dialog .lp-modal-footer .lp-button {
inline-size: 100%;
min-block-size: var(--mc-tap-target);
}
.mc-lp #lp-modal-window {
padding-block: var(--mc-space-6);
padding-inline: var(--mc-space-5);
max-inline-size: calc(100% - var(--mc-space-6));
}
.mc-lp #lp-modal-window #lp-modal-buttons {
flex-direction: column;
}
.mc-lp #lp-modal-window #lp-modal-buttons .lp-button {
inline-size: 100%;
min-block-size: var(--mc-tap-target);
}
}