/** * WPMediaVerse — Frontend Styles * * Base styles for templates, shortcodes, and unstyled blocks. * Mobile-first. RTL-ready via [dir="rtl"] overrides. * Dark mode via BuddyNext [data-theme="dark"] token cascade. * * @package WPMediaVerse */ /* ========================================================================== 0. Design Tokens ========================================================================== */ :root { /* Typography — BuddyNext first, then the THEME, via inherit. --font-body / --font-display are defined by BuddyNext and by nothing else, so on every other theme these tokens fell through to a hardcoded Apple system stack, and the plugin imposed that stack on top of whatever the theme had set. MediaVerse pages read in a different typeface from the site around them. `inherit` is the fix rather than a chain of --wp--preset--font-family--* names: a preset list only covers the themes someone thought to name, and silently misses the next one. Inheriting takes the theme's own font on ANY theme, block or classic, with nothing to maintain. */ --mvs-font: var(--font-body, inherit); --mvs-font-heading: var(--font-display, var(--mvs-font)); /* Font-size scale — single source of truth for every font-xs/sm/md/lg callsite (137 of them, Free + Pro + admin). Was only in the never-enqueued src/shared/design-tokens.css, so bare uses silently fell back to inherited size. */ --mvs-font-xs: 12px; --mvs-font-sm: 14px; --mvs-font-md: 16px; --mvs-font-lg: 18px; /* Justified-row height for the `original` grid layout. Mirrors Pro's --mvs-fl-row-height (Flickr), whose justified-rows technique this layout now shares - see the .mvs-grid--original block for why. */ --mvs-grid-row-height: 240px; /* Page width for every MediaVerse surface. The same 1200px used to be hardcoded on four wrappers and a banner, so a site owner on a wide theme had to override five rules in Additional CSS and would still drift the moment a sixth surface was added. One token, one override: :root { --mvs-content-width: 1600px; } in a child theme widens the lot, and the surfaces stay consistent with each other by construction. Basecamp 10313587813. */ --mvs-content-width: 1200px; /* Per-item aspect ratio for those justified rows. Every tile overrides this inline (TemplateHelpers::grid_item_ar_style() server-side, card-builders.js for appended cards); the value here is the 3:2 fallback for an item with no stored dimensions. Declared in :root deliberately. The CSS token-contract gate reads a var() with no definition as a phantom token, and it is right to - it cannot tell an instance property from a typo, and the typo is the common case. Giving it a real definition satisfies the contract honestly instead of adding an allowlist entry that would blind the gate to the next real one. */ --mvs-ar: 1.5; /* Brand — prefer theme BUTTON tokens first so the plugin's primary buttons (Follow / Post / Add Media (+) / .mvs-btn--primary / .mvs-fab) match the theme's own button palette. Fall back to the theme's primary/link color, then to the plugin's hard-coded brand color. BuddyX, BuddyX Pro → --button-background-color BuddyBoss → --bb-primary-button-background Reign + generic themes → --color-theme-primary Without this cascade, Follow/Post/+ buttons were always the brand/link color regardless of how the theme styled its own buttons — visibly off-palette next to native theme buttons. --mvs-on-primary picks up the theme's button text color via the same chain. */ --mvs-primary: var(--reign-site-button-bg-color, var(--button-background-color, var(--bb-primary-button-background, var(--color-theme-primary, var(--brand, #0073aa))))); --mvs-primary-hover: var(--reign-site-button-bg-hover-color, var(--button-background-hover-color, var(--bb-primary-button-background-regular-hover, var(--color-theme-primary, var(--brand-hover, #005a87))))); --mvs-on-primary: var(--reign-site-button-text-color, var(--button-text-color, var(--bb-primary-button-text-regular, #ffffff))); /* ── A CONTRAST FLOOR WE OWN ────────────────────────────────────────── * * Everything above derives from the theme, which means our AA compliance * was decided by whichever theme the buyer installed. Measured: the primary * call-to-action passes on Reign (4.51) and FAILS on Astra (4.29). Both * halves of that pair come from the theme, so when a theme's own button * colours do not meet AA, we inherited the failure (Basecamp 10252222099). * * `--mvs-primary-fill` nudges the accent 10% toward black. That alone does * NOT guarantee the floor and was never going to: measured across candidate * brand colours, a 15% darken still leaves white text at 2.00 on yellow and * 2.88 on lime. Darkening enough to fix those would change the buyer's * brand colour, which is the one thing they would notice and did not ask * for. * * `--mvs-on-primary-auto` is what actually guarantees it: relative colour * syntax reads the fill's OKLCH lightness and returns white below the * threshold, black above it. The hue is never touched — only the text * flips. Measured on the same candidates, fill + auto foreground: * * Reign 5.38 · Astra 6.15 · yellow 11.78 · lime 8.09 · pink 5.19 * navy 17.09 · grey 6.41 (minimum 5.19, all comfortably AA) * * The 10% nudge stays because it buys headroom on the dark accents that * were merely scraping past — Reign goes 4.51 -> 5.38. * * Fallback: browsers without relative colour syntax keep the theme's own * button text colour, i.e. exactly today's behaviour. Nobody is worse off * than before; supporting browsers are better off. */ --mvs-primary-fill: color-mix(in srgb, var(--mvs-primary) 90%, #000); /* * Declared straight, with NO @supports guard, and that is deliberate. * Chrome discards `@supports (color: oklch(from red l c h))` at the at-rule * parser while `CSS.supports()` returns true for the same string — measured, * the guarded rule never reached the CSSOM at all. The guard is also * unnecessary: a custom property a browser cannot parse becomes * guaranteed-invalid, so every consumer's own `var(..., fallback)` takes * over. Old browsers therefore keep exactly today's behaviour for free. */ /* * The lightness at which black and white text contrast EQUALLY against a * fill. Not a taste value: WCAG contrast is (L1+0.05)/(L2+0.05), so the * crossover is at relative luminance sqrt(0.05 * 1.05) - 0.05 = 0.1791, * which is the grey #757575, whose OKLab lightness is 0.5624. * * It was 0.62 - a guess, and one that sat a whisker above this plugin's own * default accent (#6366f1, L 0.5854), so the default landed on the wrong * side of its own threshold. Measured over 4096 colours spread across the * sRGB cube, scoring each rule against true WCAG luminance: * * 0.62, operands reversed 3739 wrong picks 3703 of them under 4.5:1 * 0.62, operands correct 357 wrong picks 317 under 4.5:1 * 0.5624, operands correct 149 wrong picks 116 under 4.5:1 * * Read it, never retype it (Coding Rule 22). admin.css declares its own copy * because the two stylesheets do not reliably load together. */ --mvs-contrast-flip-l: 0.5624; --mvs-on-primary-auto: oklch(from var(--mvs-primary-fill) clamp(0, (var(--mvs-contrast-flip-l) - l) * 1000, 1) 0 0); /* * Text on --mvs-accent, same mechanism and the same ordering requirement. * It MUST be declared here, before the @supports block below, not with the * other accent tokens further down: custom properties are same-specificity, * so a later plain declaration beats the earlier conditional one. Declared * after it, the @supports override never applied. * * This line shipped with its operands REVERSED - (l - threshold) instead of * (threshold - l) - so it returned white on light fills and black on dark * ones, the exact inverse of the rule. #6366f1 happened to come out right * anyway, which is why it survived: the wrong formula and a threshold on * the wrong side of the default cancelled out on that one colour. * Basecamp 10300601366. * * Fixed by correcting the direction AND moving the threshold to the real * crossover (see --mvs-contrast-flip-l above). Neither alone is enough: * correcting the direction at 0.62 regresses #6366f1 from black 4.70 to * white 4.47, which is why this sat unfixed. Together, #6366f1 stays black * at 4.70 and the pale fills stop getting white text at 1.28-1.43:1. * * Verified in-browser against contrast-color() on the same fills: * #6366f1 black · #ffd400 black · #a7f3d0 black · #ff2d8f black * #0b0b0b white - 5 of 5 agree. */ --mvs-on-accent: oklch(from var(--mvs-accent) clamp(0, (var(--mvs-contrast-flip-l) - l) * 1000, 1) 0 0); } /* * Lightness is not luminance, and the line above can only read lightness. * At high chroma the two disagree: #ff2d8f reads as "dark" in OKLCH (below the * 0.62 threshold, so the rule picks white) while its actual WCAG luminance is * 0.202, where black is the better partner. Measured: white 4.16, black 5.04. * A saturated brand accent is exactly where a threshold on `l` mispredicts. * * No amount of retuning 0.62 fixes that, because the error is the axis, not the * number. `contrast-color()` does the real luminance comparison, so where the * browser has it, hand the decision over. Sweeping 24 hues x 4 chromas x 12 * lightnesses, choosing the better of black/white never fell below 4.62:1 -- * so this is not a tradeoff worth exposing as a setting, it is just the * calculation done right. * * Unguarded above, guarded here, and the asymmetry is deliberate: an unparsable * custom property is guaranteed-invalid and falls through to each consumer's * own var() fallback, but an unparsable VALUE inside a supported property would * simply lose. Verified in-browser that this at-rule reaches the CSSOM, since * the note above records Chrome discarding a similar @supports for relative * colour while CSS.supports() claimed it was fine. */ @supports (color: contrast-color(red)) { :root { --mvs-on-primary-auto: contrast-color(var(--mvs-primary-fill)); /* Same treatment for the accent fill. --mvs-accent is NOT redefined in the dark block (verified: 0 occurrences in the dark :root), so this one declaration serves both modes. */ --mvs-on-accent: contrast-color(var(--mvs-accent)); } } :root { /* The brand colour AS TEXT, dark enough to pass AA. * * --mvs-primary is tuned to be a button BACKGROUND, where white sits on it * and passes easily. The same value used as text on a light page does not: * measured 4.36:1 on the dashboard rail link and the active tab label, * under the 4.5 floor for normal text (Basecamp 10253005724). * * Clamping lightness keeps the theme's hue - a site's brand still reads as * its brand - while guaranteeing the contrast. Text only; the button * background keeps the unmodified colour, which is why this is a separate * token rather than a change to --mvs-primary. * * The dark block below clamps in the opposite direction (max(l, 0.72)): * against a dark surface the accent must be LIGHTENED to clear the floor, * just as it is darkened against a light one. Same shape, opposite bound. */ --mvs-primary-text: oklch(from var(--mvs-primary) min(l, 0.48) c h); /* * The primary button's colours, resolved ONCE. * * `.mvs-btn--primary` is declared in four stylesheets across the two * plugins — here, shared-ui-frame.css (modals), bp-integration.css * (#buddypress, where a class-only rule loses to the theme's * `#buddypress button`) and Pro's gamification.css (which wins on the * competition pages by load order). The three extra copies exist for * specificity and load order, which are real problems; restating the * COLOUR in each of them was not. It meant the contrast-floor fix had to * be made four times, and whichever copy someone forgets is the one that * ships broken — which is exactly how a `color: var(--mvs-surface)` (a * page-surface token used as button text, black-on-brand in dark mode) * survived in shared-ui-frame.css long after the same mistake was found * and commented elsewhere. * * The other three now reference these four tokens and declare no colour of * their own, so the formula lives here and changing it changes every * surface. They keep a plain `var(--mvs-primary)` fallback so a context * that somehow loads without this file degrades to the theme colour rather * than to nothing — a fallback, deliberately not a second copy of the * formula. Basecamp 10252281364. */ --mvs-btn-primary-bg: var(--mvs-primary-fill, var(--mvs-primary)); --mvs-btn-primary-fg: var(--mvs-on-primary-auto, var(--mvs-on-primary, #ffffff)); --mvs-btn-primary-bg-hover: var(--mvs-primary-hover); --mvs-btn-primary-fg-hover: var(--mvs-on-primary, #ffffff); --mvs-primary-rgb: 0, 115, 170; --mvs-danger: var(--red, #d63638); --mvs-danger-rgb: 214, 54, 56; --mvs-success: var(--green, #44b700); --mvs-success-rgb: 68, 183, 0; --mvs-warning: #b58105; --mvs-warning-rgb: 181, 129, 5; /* * Text-only variants of the semantic colours, same split as * --mvs-primary-text above and for the same reason: each is used BOTH as a * fill (light text on top) and as text on its own tint, and those two jobs * want opposite adjustments. * * Measured on the drive chips against the COMPOSITED tint — the number that * matters, since the fill is an alpha over the row, not an opaque colour: * * before light dark * PDF 3.94 2.78 * DIR/word 3.90 6.82 * * So light needed darkening and dark needed lightening; the dark block * below does the second half. Changing --mvs-danger itself was the tempting * one-liner and is wrong in both directions: it fills the Delete button, * where white sits on it at 4.73:1, and moving it either way breaks that. * (Basecamp 10253005724.) */ --mvs-danger-text: oklch(from var(--mvs-danger) min(l, 0.45) c h); --mvs-success-text: oklch(from var(--mvs-success) min(l, 0.45) c h); /* Semantic backgrounds — derived tints (work in light + dark via alpha) */ --mvs-info-bg: rgba(var(--mvs-primary-rgb), 0.08); --mvs-info-bg-light: rgba(var(--mvs-primary-rgb), 0.04); --mvs-info-border: rgba(var(--mvs-primary-rgb), 0.30); --mvs-success-bg: rgba(var(--mvs-success-rgb), 0.10); --mvs-warning-bg: rgba(var(--mvs-warning-rgb), 0.12); --mvs-danger-bg: rgba(var(--mvs-danger-rgb), 0.10); /* Extended semantic tokens — promoted from former PHANTOM uses (used via var() across the plugin but never defined, so they silently froze on a light hardcoded fallback and broke in dark mode). Defined here = single source of truth, dark-mode-safe. */ --mvs-bg-subtle: var(--mvs-surface-2); /* subtle panel fill */ --mvs-on-danger: #ffffff; /* text on danger (red both modes) */ /* Text on the warning and accent fills. These existed nowhere, so every badge and chip painted on them froze `color: #fff` inline and inherited whatever contrast the fill happened to give. Measured on this theme: white on --mvs-warning #b58105 = 3.44:1 and on --mvs-accent #6366f1 = 4.47:1 - both under the 4.5 AA floor, the accent by a hair. Warning takes DARK text: it is a light-ish amber in light mode and lifts further to #f0b73a in dark, so white loses in both. Accent uses the same relative-colour trick as --mvs-on-primary-auto so it flips with the fill instead of being frozen at a value that just fails. */ --mvs-on-warning: #1f1500; /* dark text on amber, both modes */ /* Emphasis tier — see the border contract below. Mixing toward --mvs-text means this strengthens in BOTH modes off one declaration: dark redefines --mvs-border and --mvs-text, so the mix re-resolves lighter there. */ --mvs-border-strong: color-mix(in oklab, var(--mvs-border), var(--mvs-text) 30%); --mvs-accent: #6366f1; /* indigo accent (boosts/highlights) */ --mvs-accent-2: #ec4899; /* secondary accent (stories-ring gradient end) */ --mvs-accent-soft: rgba(99, 102, 241, 0.12); /* translucent → works light + dark */ /* ── Theme palette mapping (THE single source of truth) ────────────────── Each --mvs-* token inherits from the active theme's own variable so the plugin matches the theme in BOTH light and dark mode (the theme flips its own vars). Chain order = Reign → BuddyX / BuddyX Pro (--global-* / --color-theme-*) → BuddyNext (--text-* / --bg-*) → hardcoded fallback. Only the active theme's var resolves; the rest are absent. To support a new theme, add its var name to these chains here — nowhere else. The dark block below repeats the SAME chains with dark hardcoded fallbacks (only hit by generic themes that signal dark but don't theme their own vars). */ /* Surfaces */ --mvs-bg: var(--reign-site-body-bg-color, var(--color-theme-white-box, var(--bg, #ffffff))); --mvs-surface: var(--reign-site-body-bg-color, var(--global-body-lightcolor, var(--bg-subtle, #f6f7f7))); --mvs-surface-2: var(--reign-site-body-bg-color, var(--global-body-lightcolor, var(--bg-hover, #eeeeee))); --mvs-overlay: rgba(0, 0, 0, 0.72); --mvs-bg-muted: var(--reign-site-body-bg-color, var(--global-body-lightcolor, #f9fafb)); /* Text */ --mvs-text: var(--reign-site-body-text-color, var(--global-title-color, var(--text-1, #1e1e1e))); --mvs-text-secondary: var(--reign-site-alternate-text-color, var(--global-font-color, var(--text-2, #646970))); --mvs-text-muted: var(--reign-site-alternate-text-color, var(--color-meta, var(--text-3, #a7aaad))); /* ── Borders: THREE TIERS, ONE JOB EACH ───────────────────────────────── Before 2.4.0 every box drew the same line: a text input, the card holding it, and the panel holding that were all `1px solid var(--mvs-border)`. So nesting produced three identical edges and nothing receded — the member counted boxes instead of reading content. Pick by JOB, never by taste: --mvs-border-light STRUCTURE — cards, panels, sections, rows, dividers. Neutral and quiet; it separates, it does not ask to be looked at. --mvs-border CONTROLS — input, select, textarea, button, chip, dropzone. Theme-tinted: a visible edge here means "you can interact with me". --mvs-border-strong EMPHASIS — active/selected state, table head rule. Two hard rules that keep this from drifting back: 1. A bordered box MUST NOT contain another bordered box. Where nesting is real, the OUTER one drops its border and expresses depth with background + spacing instead. 2. Semantic borders (success/warning/danger, brand) are NOT part of this ladder — never swap one for a neutral tier, it destroys the meaning. */ --mvs-border: var(--reign-site-border-color, var(--global-border-color, var(--border, #dcdcde))); --mvs-border-light: var(--border-soft, #e9e9ea); /* Elevation — BuddyNext-first (soft, layered --bn-shadow-*), with a matching standalone fallback. Shared Wbcom Community-OS standard: components pick a token, never a literal box-shadow, so elevation is uniform across the suite. */ --mvs-shadow-sm: var(--bn-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 4px rgba(16, 24, 40, 0.04)); --mvs-shadow-md: var(--bn-shadow-md, 0 2px 4px rgba(16, 24, 40, 0.04), 0 8px 16px rgba(16, 24, 40, 0.06)); --mvs-shadow-lg: var(--bn-shadow-lg, 0 8px 16px rgba(16, 24, 40, 0.06), 0 24px 48px rgba(16, 24, 40, 0.08)); /* Radii — BuddyNext first, then hardcoded fallback */ --mvs-radius-sm: var(--r-sm, 6px); --mvs-radius-md: var(--r-md, 8px); --mvs-radius-lg: var(--r-lg, 12px); --mvs-radius-pill: var(--r-full, 100px); /* * Breakpoints — DOCUMENTATION ONLY. A @media query cannot read a custom * property, so nothing consumes these; they exist so that "the tablet * breakpoint" means one thing to the next person. * * They previously did not. This block said tablet=768 / mobile=480 while * src/shared/design-tokens.css said tablet=1024 / mobile=767 — the same two * names, different numbers, and whichever file you happened to read decided * what you wrote. That is how this codebase ended up with rules at both 767 * and 768, and at both 1023 and 1024 (Basecamp 10252222205). Both blocks now * carry the list below. * * 480px small phone (13 rules) * 640px phone — the most-used breakpoint (24 Free / 38 Pro) * 768px tablet boundary; below it is 767 (17 rules) * 1024px top of tablet; desktop is 1025+ (5 rules) * 782px WordPress admin's own breakpoint — core's number, not ours * * The contract asks for three and there are five. Collapsing them is a * deliberate redesign, not a tidy-up, and is NOT what this card did — the * fix here was to stop the same name meaning two things. */ --mvs-bp-phone-sm: 480px; --mvs-bp-phone: 640px; --mvs-bp-tablet: 768px; --mvs-bp-desktop: 1025px; /* ─── Mobile UX guideline tokens (see docs/MOBILE_UX_GUIDELINE.md §2.2) ── */ /* Touch target floor — Apple HIG / WCAG 2.5.5 (AAA). Every interactive element below the desktop breakpoint must clear this in both axes. */ --mvs-touch-min: 44px; /* Spacing scale — mirrors theme.json so PHP and CSS share one ramp. */ --mvs-space-1: 0.25rem; /* 4px */ --mvs-space-2: 0.5rem; /* 8px */ --mvs-space-3: 1rem; /* 16px — base gutter */ --mvs-space-4: 1.5rem; /* 24px */ --mvs-space-5: 2rem; /* 32px */ --mvs-space-6: 3rem; /* 48px */ --mvs-space-7: 4rem; /* 64px */ /* What the page pins at the top of the viewport. Every sticky MVS surface adds one of these to its own offset so it parks BELOW that chrome instead of under it. A plugin cannot hardcode a theme's header height, so the numbers come from measurement — assets/js/frontend/sticky-top.js rewrites them on load/resize/scroll. 0 is the honest default and the value that STAYS on a theme with no sticky header, so those themes keep the original offsets exactly. Two of them, because our own sticky surfaces stack on each other: --mvs-sticky-top CHROME ONLY — the WP admin bar and the THEME's header. Nothing of ours counts toward it. Read by .mvs-dashboard-tabs and .mvs-dashboard-rail. --mvs-sticky-stack Chrome PLUS our own pinned surfaces sitting above the bulk bar (at <=860px the dashboard tab strip is one). Read by .mvs-bulk-bar. The split is what stops a surface chasing itself: a single variable that the tab strip both read and contributed to would creep down the page one frame at a time. Each variable is measured with its own consumer excluded. Basecamp 10320911387. */ --mvs-sticky-top: 0px; --mvs-sticky-stack: 0px; /* Z-index layers — never use bare integers in plugin CSS. The overlay-and-above band sits in the 9990s: theme sticky headers run high (Reign #masthead is 999/1000, BuddyBoss ~991), and at the old 200–500 an MVS dropdown/modal/toast painted BEHIND the pinned header (Basecamp 10240335491). The band clears common theme headers while staying under the WP admin bar (99999), which must remain on top. Ceiling note: a theme with a fixed header at 99999 (e.g. Divi) would still win; that is a deliberate stop short of the admin bar rather than an oversight. Page chrome that legitimately sits below a theme header (base/sticky/fab) stays low. */ --mvs-z-base: 1; --mvs-z-sticky: 50; --mvs-z-fab: 100; --mvs-z-overlay: 9990; --mvs-z-modal: 9991; --mvs-z-toast: 9992; --mvs-z-tooltip: 9993; /* Motion */ --mvs-duration-fast: 120ms; --mvs-duration-base: 200ms; --mvs-duration-slow: 320ms; --mvs-easing: cubic-bezier(0.2, 0, 0, 1); /* FAB sizing + safe area so floating elements never overlap content. */ --mvs-fab-size: 48px; --mvs-fab-offset: 16px; --mvs-fab-safe: calc(var(--mvs-fab-size) + var(--mvs-fab-offset) * 2); } /* Dark mode: theme-controlled only (no prefers-color-scheme). Honors every Wbcom Community-OS dark signal: - [data-theme="dark"] on (generic themes) - [data-bn-theme="dark"] on (BuddyNext) - [data-bx-mode="dark"] on (Reign / BuddyX / BuddyX Pro 5.1+) - .dark-mode on or (legacy BuddyX) When a parent theme is active its own --color-* vars cascade through the :root mapping above, so we only set hardcoded values for sites without a dark-mode-aware parent theme. */ [data-theme="dark"], [data-bn-theme="dark"], [data-bx-mode="dark"], html.dark-mode, body.dark-mode { /* Same Reign chain as :root, but with DARK hardcoded fallbacks. Reign flips its own --reign-site-* vars for dark, so those still track the theme. The generic --global-* / --color-* fallbacks are deliberately NOT repeated in this block. Themes such as BuddyX declare them once at :root with light-mode values (--global-font-color: #0f172a, --global-body-lightcolor: #f1f5f9 -- note the name) and never flip them for dark, so chaining through them meant the dark fallbacks below were never reached: dark mode resolved to near-black text on a dark surface (~1.3:1) on every MediaVerse surface. A theme that genuinely themes dark flips --reign-site-* or restyles directly; a readable default beats an unreadable "themed" one. */ --mvs-bg: var(--reign-site-body-bg-color, #121212); --mvs-surface: var(--reign-site-body-bg-color, #1e1e1e); --mvs-surface-2: var(--reign-site-body-bg-color, #2a2a2a); --mvs-bg-muted: var(--reign-site-body-bg-color, #2a2a2a); --mvs-text: var(--reign-site-body-text-color, #f0f0f0); --mvs-text-secondary: var(--reign-site-alternate-text-color, #b0b0b0); --mvs-text-muted: var(--reign-site-alternate-text-color, #888888); --mvs-border: var(--reign-site-border-color, #363636); --mvs-border-light: #2e2e2e; /* Dark mode clamps the OTHER WAY - it does not skip the clamp. This used to be `var(--mvs-primary)` on the reasoning that "a theme already lightens its brand here (measured 7.98:1)". That was true of the accent it was measured against and false of the next one: BuddyX hands dark mode #e94560 unchanged and it scores 3.75:1 on --mvs-bg-muted, worse than anything the original report found in light mode. Not clamping is the same bug as clamping wrongly - it only works for the accents that happen to pass. Basecamp 10253005724. */ --mvs-primary-text: oklch(from var(--mvs-primary) max(l, 0.72) c h); --mvs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --mvs-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45); --mvs-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55); --mvs-warning: #f0b73a; /* Danger and success were never lightened for dark mode the way warning was, so a PDF chip painted --mvs-danger on a --mvs-danger-bg tint scored 2.78:1 against the dark surface. The fill tokens stay put; only the text variants lift. */ --mvs-danger-text: oklch(from var(--mvs-danger) max(l, 0.72) c h); --mvs-success-text: oklch(from var(--mvs-success) max(l, 0.72) c h); --mvs-info-bg: rgba(var(--mvs-primary-rgb), 0.18); --mvs-info-bg-light: rgba(var(--mvs-primary-rgb), 0.10); --mvs-success-bg: rgba(var(--mvs-success-rgb), 0.18); --mvs-warning-bg: rgba(240, 183, 58, 0.15); --mvs-danger-bg: rgba(var(--mvs-danger-rgb), 0.18); } [data-theme="dark"] .mvs-album-badge, [data-bn-theme="dark"] .mvs-album-badge, [data-bx-mode="dark"] .mvs-album-badge, .dark-mode .mvs-album-badge, [data-theme="dark"] .mvs-album-badge .mvs-icon svg, [data-bn-theme="dark"] .mvs-album-badge .mvs-icon svg, [data-bx-mode="dark"] .mvs-album-badge .mvs-icon svg, .dark-mode .mvs-album-badge .mvs-icon svg, [data-theme="dark"] .mvs-grid-item-overlay, [data-bn-theme="dark"] .mvs-grid-item-overlay, [data-bx-mode="dark"] .mvs-grid-item-overlay, .dark-mode .mvs-grid-item-overlay { color: var(--mvs-text); } [data-theme="dark"] .mvs-empty-state .mvs-icon svg, [data-bn-theme="dark"] .mvs-empty-state .mvs-icon svg, [data-bx-mode="dark"] .mvs-empty-state .mvs-icon svg, .dark-mode .mvs-empty-state .mvs-icon svg { color: var(--mvs-text-muted, #6c7781); } /* ========================================================================== 0a. Type Reset — lock down all typography inside MVS templates. Follows BuddyNext type scale. Works with or without BuddyNext. ========================================================================== */ /* No body font-size here on purpose. body.mvs-page used to set var(--font-size-regular, 1rem|inherit), but no theme and not BuddyNext defines that token, so it only ever pinned MVS pages to the root size and overrode the theme's own (responsive) body size - 17px on Reign phones where the theme uses 15px. The theme owns body text size. Basecamp 10317724451. */ /* Scope: all MVS template wrappers use these classes. font-family set here so BuddyNext's Inter/Plus Jakarta Sans carries through. */ .mvs-single-media, .mvs-single-album, .mvs-single-collection, .mvs-explore-page, .mvs-documents, .mvs-dashboard, .mvs-profile-edit { font-family: var(--mvs-font); font-size: 0.9375rem; line-height: 1.6; color: var(--mvs-text); } /* Private-media gate shown when the viewer can't see the requested media. */ .mvs-privacy-blocked { text-align: center; padding: var(--mvs-space-7) var(--mvs-space-4); } .mvs-privacy-blocked__icon { font-size: 48px; } /* Heading reset within any MVS template — uses display font for headings */ .mvs-single-media h1, .mvs-single-album h1, .mvs-single-collection h1, .mvs-explore-page h1, .mvs-documents h1, .mvs-dashboard h1, .mvs-profile-edit h1 { font-family: var(--mvs-font-heading); font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.5em; } .mvs-single-media h2, .mvs-single-album h2, .mvs-single-collection h2, .mvs-explore-page h2, .mvs-documents h2, .mvs-dashboard h2, .mvs-profile-edit h2 { font-family: var(--mvs-font-heading); font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0 0 0.5em; } .mvs-single-media h3, .mvs-single-album h3, .mvs-single-collection h3, .mvs-explore-page h3, .mvs-documents h3, .mvs-dashboard h3, .mvs-profile-edit h3 { font-family: var(--mvs-font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.35; margin: 0 0 0.5em; } .mvs-single-media h4, .mvs-single-album h4, .mvs-single-collection h4, .mvs-explore-page h4, .mvs-documents h4, .mvs-dashboard h4, .mvs-profile-edit h4 { font-size: 0.875rem; font-weight: 600; margin: 0 0 0.5em; } /* Form controls do not inherit font-family from an ancestor -- the UA sheet gives them its own default -- so MediaVerse buttons/inputs rendered in the theme's page fell back to Arial while every div around them used the theme font. This used to be scoped to a hand-maintained wrapper list that missed .mvs-explore-page, .mvs-documents, .mvs-single-album and .mvs-single-collection. body.mvs-page (TemplateLoader::body_class) covers every MVS template at once; the footer-portalled shell (lightbox, FAB, toast) carries its own copy in shared-ui-frame.css because it renders outside these wrappers. Basecamp 10309690361, 10309616378. */ body.mvs-page button, body.mvs-page input, body.mvs-page select, body.mvs-page textarea { font-family: inherit; } /* Size is a separate job at ZERO specificity. Sharing the rule above made `font-size: inherit` (0,1,2) outrank every control's own single-class size (.mvs-btn, .mvs-search-mode-btn, .mvs-lightbox-reaction ...), so they all rendered at body size. :where() keeps the fallback for controls that set no size of their own (inputs would otherwise drop to the UA 13.33px) and lets any authored size win. Basecamp 10309690361. */ :where(body.mvs-page) :where(button, input, select, textarea) { font-size: inherit; } /* Selects: never let a label run under the arrow, and never cut a word in half. Themes that restyle selects (Reign: appearance:none plus a background chevron 17px in from the edge) leave the UA arrow gutter to the control's own padding, and ours was 12px, so the tail of a long option sat under the chevron. The privacy labels are deliberately explicit (TemplateHelpers:: privacy_labels) and can be wider than a phone-width control, so the closed state truncates with an ellipsis instead of clipping mid-word; the full label is still in the open list. Basecamp 10313754840. */ body.mvs-page select { padding-inline-end: 2.25rem; text-overflow: ellipsis; } /* Keyboard focus must be visible on every MVS form control, whatever the theme does: Reign ships select/input :focus { outline: 0 }, and most of our fields had no focus style of their own, so tabbing through a modal showed nothing (WCAG 2.4.7). Same ring the toolbar controls already use. Kept at (0,1,1) through :where() so a component's own focus style still wins, and declared after the theme so a tie goes our way. Basecamp 10320619382. */ :where(body.mvs-page) :is(input, select, textarea):focus-visible { outline: 2px solid var(--mvs-primary); outline-offset: 2px; } /* ========================================================================== 0c. Mobile UX base layer Defined by docs/MOBILE_UX_GUIDELINE.md. Lives here so every template inherits Apple-quality defaults without per-page CSS overrides. ========================================================================== */ /* §3.1 — Universal touch-target floor below the desktop breakpoint. Every interactive element clears 44×44 in both axes, expanding via padding when the visible chip is smaller. 1024, not 1023. Desktop starts at 1025 (src/shared/base.css), tablet is 768-1024, and the block CSS generator emits `max-width: 1024px` for its tablet tier — so at exactly 1024px, which is iPad landscape, this floor was the ONLY tablet rule in the plugin that switched itself off. The three other tablet blocks in this file already say 1024; this one was the outlier (Basecamp 10252222205). */ @media (max-width: 1024px) { .mvs-page .mvs-btn, .mvs-page .mvs-icon-btn, .mvs-page .mvs-fab, .mvs-page .mvs-tab, .mvs-page .mvs-action-icon, .mvs-page .mvs-toast-close, .mvs-page .mvs-modal-close, .mvs-page .mvs-back-link, .mvs-page .mvs-tag-pill, .mvs-page .mvs-tag-cloud-item, .mvs-page .mvs-bulk-check, .mvs-single-media .mvs-btn, .mvs-single-album .mvs-btn, .mvs-profile-edit .mvs-btn, .mvs-dashboard .mvs-btn { min-height: var(--mvs-touch-min); min-width: var(--mvs-touch-min); } /* Load More is a full-width-ish button whose own padding left it at 40px tall. Height only — its width is already well past the floor and forcing min-width would fight the centred layout. */ .mvs-page .mvs-load-more-btn { min-height: var(--mvs-touch-min); } /* Icon-only link wrapping a 40px avatar. Grow the HIT AREA to the floor and centre the avatar inside it, rather than scaling the image up — the picture should stay 40px, the target should not. Same technique as the chips above. Found by the tap-target assertion in audit/journeys/customer/08-explore-browse-mobile.md. */ .mvs-page .mvs-dashboard-rail-head__avatar-link { display: inline-flex; align-items: center; justify-content: center; min-height: var(--mvs-touch-min); min-width: var(--mvs-touch-min); } /* Small chips/tags expand their hit area via padding instead of growing the visible bubble. Tag-cloud filter chips were 36px before this floor. */ .mvs-page .mvs-tag-pill, .mvs-page .mvs-tag-cloud-item { display: inline-flex; align-items: center; } /* Upload privacy select sat at 35px — give it the touch-target height without forcing the 44px min-width a full-width control would break on. */ .mvs-page .mvs-upload-privacy { min-height: var(--mvs-touch-min); } } /* §6 — Back link component for every detail page header. */ .mvs-back-link { display: inline-flex; align-items: center; gap: var(--mvs-space-2); color: var(--mvs-text-secondary); text-decoration: none; font-size: 0.875rem; line-height: 1; padding: var(--mvs-space-2) var(--mvs-space-3) var(--mvs-space-2) var(--mvs-space-2); margin-bottom: var(--mvs-space-3); border-radius: var(--mvs-radius-md); transition: color var(--mvs-duration-fast) var(--mvs-easing), background var(--mvs-duration-fast) var(--mvs-easing); } .mvs-back-link:hover, .mvs-back-link:focus-visible { color: var(--mvs-primary-text, var(--mvs-primary)); background: var(--mvs-info-bg-light); } .mvs-back-link i, .mvs-back-link svg { width: 18px; height: 18px; flex-shrink: 0; } @media (max-width: 767px) /* below --mvs-bp-tablet */ { /* Hide textual label — keep the chevron only. The screen-reader label stays via aria-label on the anchor. */ .mvs-back-link__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mvs-back-link { padding: var(--mvs-space-2); } } /* §7 — FAB safe area: every page that hosts a FAB pads its bottom so content never sits behind it. iOS notch supported via env(safe-area-inset-bottom). */ .mvs-page, .mvs-single-media, .mvs-single-album, .mvs-single-collection, .mvs-profile-edit, .mvs-explore-page, .mvs-documents, .mvs-dashboard { padding-bottom: calc(var(--mvs-fab-safe) + env(safe-area-inset-bottom, 0px)); } /* §4.1/§4.2 — Icon-collapse buttons: text-and-icon control that collapses to icon-only below the tablet breakpoint and exposes a CSS-only tooltip. */ .mvs-btn--icon-collapse { display: inline-flex; align-items: center; gap: var(--mvs-space-2); position: relative; } .mvs-btn--icon-collapse i, .mvs-btn--icon-collapse svg { width: 18px; height: 18px; flex-shrink: 0; } @media (max-width: 767px) /* below --mvs-bp-tablet */ { .mvs-btn--icon-collapse .mvs-btn__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .mvs-btn--icon-collapse { padding-inline: var(--mvs-space-2); gap: 0; justify-content: center; } } /* CSS-only tooltip: shows on :hover (mouse) and :focus-visible (touch + kb). Pages set data-mvs-tooltip="Label" on any element to opt in. */ [data-mvs-tooltip] { position: relative; } [data-mvs-tooltip]::after { content: attr(data-mvs-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--mvs-text); color: var(--mvs-bg); font-size: 0.75rem; line-height: 1; padding: var(--mvs-space-2) var(--mvs-space-2); border-radius: var(--mvs-radius-sm); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--mvs-duration-fast) var(--mvs-easing), transform var(--mvs-duration-fast) var(--mvs-easing); z-index: var(--mvs-z-tooltip); } [data-mvs-tooltip]:hover::after, [data-mvs-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } @media (prefers-reduced-motion: reduce) { [data-mvs-tooltip]::after { transition: none; } } /* §-skeleton — Loading shimmer placeholders. Drop-in component for any "waiting on REST" surface. Pages add the .mvs-skeleton class to a sized box; the shimmer animation pulses across. Reduced motion swaps to a static muted background. */ .mvs-skeleton { position: relative; overflow: hidden; background: var(--mvs-surface); border-radius: var(--mvs-radius-md); isolation: isolate; } .mvs-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); transform: translateX(-100%); animation: mvs-skeleton-shimmer 1.4s var(--mvs-easing) infinite; } [data-theme="dark"] .mvs-skeleton::after, [data-bx-mode="dark"] .mvs-skeleton::after, html.dark-mode .mvs-skeleton::after, body.dark-mode .mvs-skeleton::after { background: linear-gradient( 90deg, transparent 0, rgba(255, 255, 255, 0.06) 50%, transparent 100% ); } @keyframes mvs-skeleton-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .mvs-skeleton::after { animation: none; } } .mvs-skeleton--text { height: 0.875rem; margin-bottom: 0.5rem; border-radius: var(--mvs-radius-sm); } .mvs-skeleton--text:last-child { margin-bottom: 0; width: 60%; } .mvs-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; } .mvs-skeleton--thumb { aspect-ratio: 1 / 1; border-radius: var(--mvs-radius-md); } .mvs-skeleton-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--mvs-space-2); } @media (min-width: 768px) /* --mvs-bp-tablet and up */ { .mvs-skeleton-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--mvs-space-3); } } /* §5 — Tab strip pattern: horizontal scroll with edge-fade mask + scroll-snap. Components opt in by adding the .mvs-tabs-strip class. */ .mvs-tabs-strip { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; /* Edge-fade telegraphs that more tabs exist beyond the right edge. */ -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); } .mvs-tabs-strip::-webkit-scrollbar { display: none; } .mvs-tabs-strip > * { scroll-snap-align: start; flex: 0 0 auto; } /* When the strip fits without scrolling, drop the mask so the right edge is solid. */ @supports selector(:has(*)) { .mvs-tabs-strip:not(:hover):not(:focus-within):where(:not([data-overflow="true"])) { /* Re-enabled by JS via [data-overflow="true"] when scrollWidth > clientWidth. */ } } /* ========================================================================== 0b. Profile Header Card (explore grid filtered by user) ========================================================================== */ .mvs-profile-header-card { display: flex; align-items: flex-start; gap: 32px; padding: 32px; margin-bottom: 24px; background: var(--mvs-surface); /* Pair the foreground with the background this component sets; without it the text inherited the ambient theme colour and went unreadable in dark mode (measured 1.07-1.38:1). */ color: var(--mvs-text); border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .mvs-profile-header-avatar { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 3px solid var(--mvs-surface-2); } .mvs-profile-header-info { flex: 1; min-width: 0; } .mvs-profile-header-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .mvs-profile-header-name { margin: 0; font-size: 1.5rem; font-weight: 700; /* No color → inherits theme heading color, washes out on the dark surface card in dark mode (same bug class as the compete-hub headings). */ color: var(--mvs-text); } .mvs-follow-toggle { cursor: pointer; transition: background 0.15s, color 0.15s; } .mvs-follow-toggle--following { background: var(--mvs-surface-2); color: var(--mvs-text); border: 1px solid var(--mvs-border); } .mvs-follow-toggle--following:hover { background: var(--mvs-danger-bg); color: var(--mvs-danger); border-color: var(--mvs-danger); } .mvs-follow-toggle:disabled { opacity: 0.6; cursor: wait; } .mvs-message-btn { transition: background 0.15s; } /* align-items: the follower/following buttons carry padding-block for the 44px tap target while the "N media" span does not, so under the default stretch the span's content sat ~14px higher than the buttons'. Basecamp 10313672574. */ .mvs-profile-header-stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mvs-space-xs, 6px) 28px; font-size: 0.9375rem; color: var(--mvs-text-secondary); margin-bottom: 12px; } /* Each stat stays one unit on one line. The media count is a span and the follower counts are buttons; when the row got tight on a phone the buttons shrank and broke "6 / followers" over two lines while "6 media" stayed on one, so the row read as three layouts. A stat that does not fit now moves to the next line whole. Basecamp 10313672574. */ .mvs-profile-header-stats > * { flex-shrink: 0; white-space: nowrap; } .mvs-profile-header-stats span { display: flex; align-items: baseline; gap: 4px; } .mvs-profile-header-stats strong { color: var(--mvs-text); font-size: 1.125rem; font-weight: 700; } .mvs-profile-header-bio { margin: 0; color: var(--mvs-text); font-size: 0.9rem; line-height: 1.6; max-width: 600px; } @media (max-width: 640px) { .mvs-profile-header-card { flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 24px 16px; } .mvs-profile-header-avatar { width: 96px; height: 96px; } .mvs-profile-header-top { justify-content: center; } .mvs-profile-header-stats { justify-content: center; /* 28px between three stats needs ~311px; the phone header column is ~288px. The stat buttons already carry 6px inline padding. */ column-gap: var(--mvs-space-sm, 8px); } .mvs-profile-header-bio { max-width: 100%; } } /* ========================================================================== 1. Single Media Template ========================================================================== */ .mvs-single-media { max-width: 680px; margin: 0 auto; padding: 20px 16px; } .mvs-media-article { background: var(--mvs-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .mvs-media-header { padding: 16px var(--mvs-space-4); } .mvs-media-header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .mvs-media-author-info { display: flex; align-items: center; gap: 10px; min-width: 0; } .mvs-media-author-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .mvs-media-author-text { display: flex; flex-direction: column; min-width: 0; } .mvs-media-author-name { font-weight: 600; font-size: 0.9375rem; color: var(--mvs-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mvs-media-author-name:hover { color: var(--mvs-primary-text, var(--mvs-primary)); } .mvs-media-date { font-size: 0.8125rem; color: var(--mvs-text-muted); } .mvs-media-sep { margin: 0 2px; } .mvs-media-title { margin: 0; font-size: 1.5em; line-height: 1.3; } /* ========================================================================== Document identity line — type, size, privacy, location. The drive row already showed all four; this page showed none, so opening a document from the list LOST information. Privacy is the one that matters: without it a member cannot tell a private contract from a public one, on the same screen as a button that can mint a link anyone can open. ========================================================================== */ .mvs-media-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mvs-space-2); margin: var(--mvs-space-2) 0 0; color: var(--mvs-text-muted); font-size: var(--mvs-font-sm); line-height: 1.4; } /* Separator is drawn, not typed, so the parts stay independently omittable — any of type / size / privacy / location can be absent without leaving a stranded bullet behind. */ .mvs-media-meta__item + .mvs-media-meta__item::before, .mvs-media-meta__type + .mvs-media-meta__item::before, .mvs-media-meta__privacy + .mvs-media-meta__item::before { content: "·"; margin-inline-end: var(--mvs-space-2); opacity: 0.55; } .mvs-media-meta__item { font-variant-numeric: tabular-nums; } /* The type chip is a LABEL, not a status, so it stays neutral. It deliberately does NOT copy the drive's `--mvs-info-bg` + `--mvs-primary` pairing: on this theme `--mvs-primary` is red, so that pair renders red text on a blue wash. A neutral chip also lets the privacy chip beside it be the only coloured thing on the line, which is the one worth noticing. */ .mvs-media-meta__type { display: inline-flex; align-items: center; padding: 2px 6px; border-radius: var(--mvs-radius-sm); background: var(--mvs-bg-muted); color: var(--mvs-text-secondary); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Amber wash carries the "restricted" signal; the TEXT is the normal ink so it stays legible. `--mvs-warning` on `--mvs-warning-bg` is the same hue at 15% alpha — amber on amber, which measured at almost no contrast in either theme. */ .mvs-media-meta__privacy { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--mvs-radius-pill); background: var(--mvs-warning-bg); color: var(--mvs-text); font-size: var(--mvs-font-sm); font-weight: 600; } /* Sits beside the privacy chip and borrows its shape. Deliberately NOT the privacy chip's colour: this is not a restriction, it is a fact about reach, and colouring it like a lock would read as a second privacy state. */ .mvs-media-meta__shared { display: inline-flex; align-items: center; gap: 4px; background: var(--mvs-surface-2); color: var(--mvs-text-secondary); border-radius: var(--mvs-radius-pill, 999px); padding: 2px var(--mvs-space-sm, 8px); font-size: 0.8125rem; } .mvs-media-meta__shared svg, .mvs-media-meta__shared [data-lucide] { width: 14px; height: 14px; color: inherit; flex-shrink: 0; } .mvs-media-meta__privacy i, .mvs-media-meta__privacy svg { color: var(--mvs-warning); } .mvs-media-meta__privacy i, .mvs-media-meta__privacy svg { width: 12px; height: 12px; } /* The document block lines up with the title above it. `.mvs-media-content` is deliberately flush at 0 so a PHOTO can run edge to edge in its card — that is right for an image and wrong for a page of text, which sat 24px to the left of its own heading. Inset the document wrapper only, rather than padding the shared content area and boxing in every image on the site. */ .mvs-media-document { padding-inline: var(--mvs-space-4); } @media (max-width: 640px) { .mvs-media-document { padding-inline: var(--mvs-space-3); } } /* Follow steps back on a document page so Download is the only primary. */ .mvs-btn.mvs-follow-btn--quiet { background: transparent; border-color: var(--mvs-border); color: var(--mvs-text-secondary); font-weight: 500; } .mvs-btn.mvs-follow-btn--quiet:hover, .mvs-btn.mvs-follow-btn--quiet:focus-visible { border-color: var(--mvs-primary); color: var(--mvs-primary-text, var(--mvs-primary)); } /* Media Content */ .mvs-media-content { padding: 0; } .mvs-media-image { width: 100%; background: var(--mvs-surface-2); } .mvs-media-image img { display: block; width: 100%; height: auto; } .mvs-media-video { width: 100%; background: var(--mvs-overlay); /* aspect-ratio is set inline from the media's stored width/height so * the frame is reserved on first paint. Without it, the box reflows * when metadata/poster/playback transitions happen. */ } .mvs-media-video video { display: block; width: 100%; height: 100%; /* Letterbox the source inside the locked frame instead of stretching * — keeps poster and playback at identical dimensions. */ object-fit: contain; background: #000; } .mvs-media-audio { padding: 16px 24px; } .mvs-media-audio audio { width: 100%; } .mvs-media-description { padding: 12px var(--mvs-space-4) 0; line-height: 1.6; color: var(--mvs-text); font-size: 0.9375rem; } .mvs-media-description p:first-child { margin-top: 0; } /* Footer & Tags */ /* * ONE HORIZONTAL RHYTHM ON THE MEDIA CARD. * * The card's four rows each chose their own inline padding — header 24px, * content 0 (its own children re-inset to 24), social wrapper 0, footer and * comments 16px — so the comment box and the description sat 8px closer to the * card's edge than the title, meta, preview and actions above them. Reported as * "why is it touching the border": nothing was overflowing, the rows simply * disagreed about where the edge is. * * 24px desktop / 16px mobile, on every row, so a vertical line drawn down the * card touches the start of all of them. */ .mvs-media-footer { padding: 8px var(--mvs-space-4) var(--mvs-space-4); } .mvs-media-tags { display: flex; flex-wrap: wrap; gap: 6px; } .mvs-tag { display: inline-block; padding: 4px 12px; background: var(--mvs-info-bg); border-radius: 16px; font-size: 0.8125rem; color: var(--mvs-primary-text, var(--mvs-primary)); text-decoration: none; transition: all 0.2s; } .mvs-tag:hover { background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); } /* ========================================================================== 2. Album Template ========================================================================== */ .mvs-single-album { max-width: var(--mvs-content-width, 1200px); margin: 0 auto; padding: 20px; } .mvs-album-article { background: var(--mvs-bg); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); padding: 24px; } .mvs-album-header { margin-bottom: 24px; } .mvs-album-title { margin: 0 0 8px; font-size: 1.75em; } .mvs-album-description { color: var(--mvs-text-secondary); margin-bottom: 12px; line-height: 1.6; } .mvs-album-count { display: inline-block; padding: 4px 12px; background: var(--mvs-surface-2); border-radius: 16px; font-size: 0.85em; color: var(--mvs-text-secondary); } /* ========================================================================== 3. Explore / Archive Template ========================================================================== */ .mvs-explore-page { max-width: var(--mvs-content-width, 1200px); margin: 0 auto; padding: 20px; box-sizing: border-box; width: 100%; } .mvs-explore-header { margin-bottom: 24px; } .mvs-explore-header h1 { margin: 0; font-size: 1.75em; /* Sits directly on the THEME's page background, not on a MediaVerse surface, so it follows the theme's own text colour. Using --mvs-text made it vanish on a theme that signals dark (so --mvs-text goes light) while keeping the page background white - BuddyX only darkens its footer. */ color: inherit; } /* ========================================================================== 4. Media Grid (shared by explore, album, shortcodes) ========================================================================== */ .mvs-media-grid { display: grid; /* The token, with the long-standing 16px as its fallback. The media-grid block emits --mvs-grid-gap per instance from its Gap control; that only worked while the block shipped its own duplicate .mvs-media-grid rule. Reading it here keeps the control working once that duplicate is gone, and every surface that sets nothing still gets 16px. */ gap: var(--mvs-grid-gap, 16px); max-width: 100%; overflow: hidden; box-sizing: border-box; } .mvs-cols-2 { grid-template-columns: repeat(2, 1fr); } .mvs-cols-3 { grid-template-columns: repeat(3, 1fr); } .mvs-cols-4 { grid-template-columns: repeat(4, 1fr); } .mvs-cols-5 { grid-template-columns: repeat(5, 1fr); } @media (max-width: 1024px) { .mvs-cols-5 { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 767px) /* below --mvs-bp-tablet */ { .mvs-cols-3, .mvs-cols-4, .mvs-cols-5 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .mvs-cols-2, .mvs-cols-3, .mvs-cols-4, .mvs-cols-5 { grid-template-columns: 1fr; } } .mvs-grid-item { position: relative; overflow: hidden; border-radius: 8px; background: var(--mvs-surface-2); /* Pair the foreground with the background this component sets; without it the text inherited the ambient theme colour and went unreadable in dark mode (measured 1.07-1.38:1). */ color: var(--mvs-text); aspect-ratio: 1; min-width: 0; } .mvs-grid-item > a { display: block; width: 100%; height: 100%; } .mvs-grid-item img, .mvs-grid-item .mvs-grid-video-preview { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; background: #0f1014; } .mvs-grid-item:hover img, .mvs-grid-item:hover .mvs-grid-video-preview { transform: scale(1.05); } .mvs-grid-item .mvs-grid-video-preview { pointer-events: none; } .mvs-grid--original .mvs-grid-item img { /* Fills the fixed-height link. The justified row already gives the tile the width its aspect ratio earns, so `cover` crops nothing visible. */ width: 100%; height: 100%; object-fit: cover; } .mvs-grid--original .mvs-dashboard-card-thumb { aspect-ratio: auto; } .mvs-grid--original .mvs-dashboard-card-thumb img { height: auto; object-fit: contain; } /* Original mode = JUSTIFIED ROWS (Flickr / Google Photos): every image keeps its native aspect ratio, each row is stretched to the full width, and rows read LEFT TO RIGHT. This replaced CSS multi-column, which packed tightly but filled column-major: with "Newest first" the visible top row was items #1, #5 and #9, so scanning the page the way people actually scan it did not give newest-first. The sort control, the REST order and the DOM were all correct and only the layout disagreed (Basecamp 10298798668). The technique is Pro's Flickr layout, which already solved this: each item carries its aspect ratio as the `--mvs-ar` instance custom property, and flex-grow distributes each row's width in proportion to it. flex-basis is derived from the same ratio so a row WRAPS at the right point - with flex-basis 0 every tile would land on one line and never wrap. Why not CSS grid + `grid-row: span N`: a grid row cannot be sized as a function of column width, so a server-computed span is only correct at one column count and this layout goes 3 -> 2 -> 1 columns. That needs a JS measure pass; this does not. */ .mvs-media-grid.mvs-grid--original { display: flex; flex-direction: row; flex-wrap: wrap; /* 4px, not the 16px the square grid uses, and the difference is not cosmetic - it decides how many tiles fit a row. A tile's flex-basis is `ratio * row-height`, so three landscape tiles want 3 x 360 = 1080px. At a 1100px container the 16px gap made that 1080 + 32 = 1112 and the row wrapped to TWO tiles, which then stretched to fill 1100 - displaying at aspect 2.13 against a natural 1.50 and cropping 32% of each image's height. Missing by 12px cost a third of the picture. At 4px it is 1080 + 8 = 1088, three tiles fit, and the stretch is 1100/1080 - about 2%. Measured, not estimated. Same value Pro's Flickr layout uses (--mvs-fl-gap), which is the same technique and has the same arithmetic. Still `var(--mvs-grid-gap, ...)`: the media-grid block emits that property per instance from its Gap control, so an owner who sets a gap deliberately still wins - only the DEFAULT changed. */ gap: var(--mvs-grid-gap, 4px); } .mvs-grid--original .mvs-grid-item { /* --mvs-ar is emitted per item by TemplateHelpers::grid_item_ar_style() (PHP) and window.mvsCardBuilders (JS). The 1.5 fallback is the same landscape default Flickr uses when an item has no stored dimensions - album and collection covers, for instance. */ flex-grow: var(--mvs-ar, 1.5); flex-shrink: 1; flex-basis: calc(var(--mvs-ar, 1.5) * var(--mvs-grid-row-height)); min-width: 120px; max-width: 100%; aspect-ratio: auto; } /* A lone orphan on the last row would otherwise stretch the full width. */ .mvs-grid--original .mvs-grid-item:last-child { max-width: min(100%, calc(var(--mvs-ar, 1.5) * var(--mvs-grid-row-height))); } /* The card's wrapper is forced square by `.mvs-feed .mvs-grid-item-link` (a later, equal-specificity rule); beat it with a compound selector so the link hugs the image. DIRECT CHILD only, never `.mvs-grid-item a`. That descendant form also matched the author profile link inside .mvs-grid-item-info, which then took the full row height: every card rendered 496px tall around a 240px image. It was harmless while this rule said `height: auto` and became a bug the moment it carried a real height. */ .mvs-media-grid.mvs-grid--original .mvs-grid-item-link, .mvs-media-grid.mvs-grid--original .mvs-grid-item > a { aspect-ratio: auto; /* The ROW height lands here, not on .mvs-grid-item: render_grid_item() adds a .mvs-grid-item-info author row below this link on some surfaces and not others. Fixing the image area keeps every card in a row the same height either way; fixing the whole card would clip that row. */ height: var(--mvs-grid-row-height); display: block; } /* The author row keeps its natural height - it is a sibling of the media link, not part of the image area. */ .mvs-media-grid.mvs-grid--original .mvs-grid-item-info a { height: auto; } /* List mode: one row per item, thumbnail beside the title. Overrides .mvs-media-grid's columns and .mvs-grid-item's square aspect-ratio. The title comes OUT of the hover overlay deliberately: a row that reveals its title on hover is unreadable on touch, where there is no hover. */ .mvs-media-grid.mvs-grid--list { display: flex; flex-direction: column; gap: 12px; } /* COMPOUND selector deliberately. `.mvs-feed .mvs-grid-item` (display:flex, ~150 lines below) has the same 0-2-0 specificity and wins on order, so the plain `.mvs-grid--list .mvs-grid-item` form lost every time: display stayed flex, grid-template-columns was computed but inert, and the thumbnail filled the row at 1084px square instead of sitting 96px beside the title. Explore carries `mvs-feed` on its container (explore.php), so that was every Explore surface - the List option a site owner can pick has never rendered as a list. Basecamp 10299239470. */ .mvs-media-grid.mvs-grid--list .mvs-grid-item { aspect-ratio: auto; display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; padding: 8px; } /* The square wrapper is wanted here - it keeps the row thumbnails aligned - but it must size to the column, not to the row. DIRECT CHILD only, never `.mvs-grid-item a`. The descendant form also matched the author profile link inside .mvs-grid-item-info, which sits in the 1fr column: at ~956px wide, `aspect-ratio: 1` made it ~956px TALL and dragged the whole list row to 988px. Same over-broad selector, same author link, same symptom as the one fixed in `--original` above - the two were written apart and only one was hardened (Basecamp 10299239470). */ .mvs-media-grid.mvs-grid--list .mvs-grid-item-link, .mvs-media-grid.mvs-grid--list .mvs-grid-item > a { aspect-ratio: 1; height: auto; border-radius: 6px; overflow: hidden; } .mvs-grid--list .mvs-grid-item-overlay { position: static; inset: auto; background: none; color: inherit; opacity: 1; justify-content: flex-start; /* start, not left: the row reads right-to-left in an RTL locale. */ text-align: start; padding: 0; } .mvs-grid--list .mvs-grid-item-title { white-space: normal; font-weight: 600; } @media (max-width: 480px) { .mvs-grid--list .mvs-grid-item { grid-template-columns: 72px 1fr; } } /* Justified rows need no column-count breakpoints - the row height is the only knob, and fewer/taller items land per row as the screen narrows. Same ladder as Pro's Flickr layout. */ @media (max-width: 1024px) { :root { --mvs-grid-row-height: 180px; } } @media (max-width: 640px) { :root { --mvs-grid-row-height: 140px; } } .mvs-grid-item-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--mvs-text-muted); } .mvs-grid-item-placeholder .mvs-icon [data-lucide], .mvs-grid-item-placeholder .mvs-icon svg { width: 48px; height: 48px; } .mvs-grid-item-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.4); color: var(--mvs-bg); font-size: 0.9em; opacity: 0; transition: opacity 0.3s; } .mvs-grid-item:hover .mvs-grid-item-overlay, .mvs-grid-item-link:hover .mvs-grid-item-overlay { opacity: 1; } .mvs-grid-item-stats { display: flex; gap: 16px; font-size: 1.1em; font-weight: 700; } .mvs-grid-stat { display: flex; align-items: center; gap: 4px; } /* Lucide's default is 24x24, which towers over a two-digit count in the thumbnail overlay. Same cap the button rule applies, at the smaller size this context wants. `currentColor` is what makes these follow the token palette — the thing the emoji they replaced could never do. */ /* Cover placeholders for albums and collections. Same reason as the grid stats: a Lucide ignores the `font-size` these were sized by, so it needs real dimensions to keep the presence the placeholder was laid out around. */ .mvs-grid-collection-icon svg, .mvs-grid-collection-icon [data-lucide], .mvs-grid-album-icon svg, .mvs-grid-album-icon [data-lucide] { width: 40px; height: 40px; stroke-width: 1.5; color: inherit; } .mvs-grid-stat svg, .mvs-grid-stat [data-lucide] { width: 14px; height: 14px; stroke-width: 2; flex-shrink: 0; color: inherit; } .mvs-grid-item-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Instagram-like feed: author row below each card */ .mvs-feed { gap: var(--mvs-grid-gap, 6px); } .mvs-feed .mvs-grid-item { aspect-ratio: auto; border-radius: 4px; overflow: hidden; background: var(--mvs-bg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; min-width: 0; } .mvs-feed .mvs-grid-item-link { display: block; aspect-ratio: 1; overflow: hidden; position: relative; } .mvs-feed .mvs-grid-item-overlay { pointer-events: none; } .mvs-grid-item-info { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--mvs-bg); font-size: 0.85em; } .mvs-grid-avatar { border-radius: 50%; width: 24px !important; height: 24px !important; } .mvs-grid-item-author { font-weight: 600; color: var(--mvs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Avatar + name link to the uploader's profile (card #9962508646). Reset the default link chrome so it reads like the prior plain text; the name underlines + tints on hover/focus as the affordance. min-width:0 keeps the inner ellipsis working inside the flex link. */ .mvs-grid-item-author-link { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; color: inherit; } .mvs-grid-item-author-link:visited { color: inherit; } .mvs-grid-item-author-link:hover .mvs-grid-item-author, .mvs-grid-item-author-link:focus-visible .mvs-grid-item-author { color: var(--mvs-primary-text, var(--mvs-text)); text-decoration: underline; } .mvs-grid-item-author-link:focus-visible { outline: 2px solid var(--mvs-primary, currentColor); outline-offset: 2px; border-radius: 4px; } /* -- Album badge (carousel indicator) in feed */ .mvs-album-badge { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; background: rgba(0, 0, 0, 0.6); color: var(--mvs-bg); padding: 4px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 600; pointer-events: none; z-index: 2; } .mvs-album-badge .mvs-icon [data-lucide], .mvs-album-badge .mvs-icon svg { width: 16px; height: 16px; color: var(--mvs-bg); } /* -- Gallery badge (multi-image group indicator) */ .mvs-gallery-badge { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 2px; background: rgba(0, 0, 0, 0.6); color: var(--mvs-surface); padding: 4px 8px; border-radius: 4px; font-size: 0.8em; font-weight: 600; pointer-events: none; z-index: 2; } .mvs-gallery-badge .mvs-icon [data-lucide], .mvs-gallery-badge .mvs-icon svg { width: 16px; height: 16px; color: var(--mvs-surface); } /* ========================================================================== 5. Pagination ========================================================================== */ .mvs-pagination { margin-top: 32px; text-align: center; } .mvs-pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; } .mvs-pagination .page-numbers { display: inline-block; padding: 8px 14px; background: var(--mvs-surface-2); border-radius: 4px; text-decoration: none; color: var(--mvs-text); font-size: 0.9em; transition: background 0.2s; } .mvs-pagination .page-numbers.current, .mvs-pagination .page-numbers:hover { background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); } /* ========================================================================== 6. Empty State ========================================================================== */ .mvs-no-media { text-align: center; padding: 48px 24px; color: var(--mvs-text-muted); font-size: 1.1em; } /* ========================================================================== 9. Story Viewer ========================================================================== */ .mvs-story-viewer { position: relative; max-width: 400px; margin: 0 auto; background: var(--mvs-overlay); border-radius: 12px; overflow: hidden; aspect-ratio: 9/16; } .mvs-story-viewer img, .mvs-story-viewer video { width: 100%; height: 100%; object-fit: cover; } .mvs-story-progress { display: flex; gap: 4px; padding: 8px 12px; position: absolute; top: 0; left: 0; right: 0; z-index: 2; } .mvs-story-progress-bar { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.4); border-radius: 2px; overflow: hidden; } .mvs-story-progress-fill { height: 100%; background: var(--mvs-bg); width: 0; transition: width linear; } .mvs-story-header { position: absolute; top: 24px; left: 12px; right: 12px; z-index: 2; display: flex; align-items: center; gap: 8px; color: var(--mvs-bg); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .mvs-story-nav { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 1; cursor: pointer; background: none; border: none; } .mvs-story-nav--prev { left: 0; } .mvs-story-nav--next { right: 0; } /* ========================================================================== 10. Stats Cards ========================================================================== */ .mvs-stats-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .mvs-stat-card { background: var(--mvs-bg); border-radius: 8px; padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); text-align: center; } .mvs-stat-value { display: block; font-size: 2em; font-weight: 700; color: var(--mvs-primary-text, var(--mvs-primary)); line-height: 1.2; } .mvs-stat-label { display: block; margin-top: 4px; font-size: 0.9em; color: var(--mvs-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } /* ========================================================================== 11. Lock Overlay (Paywall) ========================================================================== */ .mvs-lock-overlay { position: relative; border-radius: 8px; overflow: hidden; } .mvs-lock-preview { filter: blur(8px); pointer-events: none; } .mvs-lock-prompt { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; background: rgba(255, 255, 255, 0.95); padding: 32px 40px; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15); z-index: 2; max-width: 360px; width: 90%; } .mvs-lock-icon { font-size: 36px; color: var(--mvs-primary-text, var(--mvs-primary)); margin-bottom: 12px; } .mvs-lock-title { font-size: 1.2em; font-weight: 600; margin-bottom: 8px; } .mvs-lock-message { color: var(--mvs-text-secondary); font-size: 0.9em; margin-bottom: 16px; line-height: 1.5; } .mvs-lock-button { display: inline-block; padding: 10px 24px; background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); border: none; border-radius: 6px; font-size: 1em; cursor: pointer; text-decoration: none; transition: background 0.2s; } .mvs-lock-button:hover { background: var(--mvs-primary-hover); color: var(--mvs-bg); } /* ========================================================================== 12. Social Interactions Bar (for Step 47d) ========================================================================== */ .mvs-reactions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .mvs-social-bar button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: none; border: 1px solid var(--mvs-border); border-radius: 20px; cursor: pointer; font-size: 0.9em; color: var(--mvs-text-secondary); transition: all 0.2s; } .mvs-social-bar button:hover { background: none; border: 1px solid var(--mvs-primary); color: var(--mvs-primary-text, var(--mvs-primary)); } .mvs-social-bar__actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } .mvs-social-bar button.active { background: var(--mvs-btn-primary-bg); border-color: var(--mvs-primary); color: var(--mvs-btn-primary-fg); } .mvs-social-bar .mvs-count { font-weight: 600; } .mvs-social-bar button.mvs-view-count { color: var(--mvs-text-muted); font-size: 0.85em; } .mvs-social-actions { display: flex; align-items: center; padding: 8px 24px 12px; } .mvs-social-actions-left { display: flex; align-items: center; gap: 8px; } .mvs-social-actions .mvs-view-count { flex: 1; text-align: center; } .mvs-social-actions-right { display: flex; align-items: center; gap: 6px; } .mvs-social-actions button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: none; border: 1px solid var(--mvs-border); border-radius: 20px; cursor: pointer; font-size: 0.9em; color: var(--mvs-text-secondary); transition: all 0.2s; } .mvs-social-actions button:hover, .mvs-social-actions button:focus { background: none; color: var(--mvs-primary-text, var(--mvs-primary)); border: 1px solid var(--mvs-primary); } .mvs-social-actions button.active { background: var(--mvs-btn-primary-bg); border-color: var(--mvs-primary); color: var(--mvs-btn-primary-fg); } @media (max-width: 767px) /* below --mvs-bp-tablet */ { /* Hide the view count on mobile to reclaim space — it's a passive metric. */ .mvs-single-media .mvs-social-actions .mvs-view-count { display: none; } } /* ========================================================================== 13. Comments Section (for Step 47d) ========================================================================== */ .mvs-comments-section { padding: 12px var(--mvs-space-4) var(--mvs-space-4); border-top: 1px solid var(--mvs-border-light); } .mvs-comments-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 12px; color: var(--mvs-text); } .mvs-comment-form { display: flex; gap: 8px; margin-bottom: 16px; } .mvs-comment-form textarea { flex: 1; padding: 10px 12px; background-color: var(--mvs-bg); border: 1px solid var(--mvs-border); border-radius: 8px; resize: none; min-height: 40px; font-family: inherit; font-size: 0.875rem; } .mvs-comment-form button { padding: 10px 16px; background: var(--mvs-primary); color: var(--mvs-btn-primary-fg, #fff); border: none; border-radius: 6px; cursor: pointer; font-size: 0.9em; align-self: flex-end; transition: background 0.2s; } .mvs-comment-form button:hover { background: var(--mvs-primary-hover); } .mvs-comment-list { list-style: none; margin: 0; padding: 0; } .mvs-comment-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--mvs-border-light, #e5e7eb); } .mvs-comment-item:last-child { border-bottom: none; } .mvs-comment-avatar-link { flex-shrink: 0; display: block; line-height: 0; text-decoration: none; } .mvs-comment-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block; } .mvs-comment-body-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .mvs-comment-header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .mvs-comment-author-link { text-decoration: none; color: inherit; } .mvs-comment-author-link:hover .mvs-comment-author { text-decoration: underline; } .mvs-comment-author { font-weight: 600; font-size: 14px; color: var(--mvs-text, #111827); } .mvs-comment-date { font-size: 12px; color: var(--mvs-text-muted, #6b7280); white-space: nowrap; flex-shrink: 0; } .mvs-comment-text { font-size: 14px; line-height: 1.55; color: var(--mvs-text, #111827); word-wrap: break-word; overflow-wrap: anywhere; } .mvs-comment-actions { display: flex; gap: 6px; margin-top: 4px; } .mvs-comment-actions .mvs-btn--small { padding: 4px 10px; font-size: 12px; } /* ========================================================================== 14. Dashboard ========================================================================== */ .mvs-dashboard { max-width: var(--mvs-content-width, 1200px); margin: 0 auto; padding: 20px; } .mvs-dashboard-header h1 { margin: 0 0 20px; font-size: 1.75em; } .mvs-dashboard-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--mvs-border-light); margin-bottom: 24px; } .mvs-dashboard-tab { /* 12px padding on a 0.95em label lands at ~37px, under the 40px contract. The earlier tap-target sweep missed these because it measured buttons and .mvs-btn, and a tab is neither - it is an (QA re-verify, Basecamp 10252222115: 7 tabs measured 36.6-37.6px). min-height enforces the floor without changing the visual padding on surfaces where the label already pushes it past 40px. */ min-height: var(--mvs-touch-min, 40px); display: inline-flex; align-items: center; padding: 12px 24px; background: none; border: none; border-radius: 0; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-size: 0.95em; font-weight: 600; color: var(--mvs-text); opacity: 0.75; transition: all 0.2s; } .mvs-dashboard-tab:hover, .mvs-dashboard-tab:focus, .mvs-dashboard-tab.active { opacity: 1; } .mvs-dashboard-tab:hover, .mvs-dashboard-tab:focus { color: var(--mvs-primary-text, var(--mvs-primary)); background: none; border: none; border-bottom: 2px solid var(--mvs-primary); border-radius: 0; } .mvs-dashboard-tab:first-child { padding-left: 0; } .mvs-dashboard-tab.active { /* Label is text -> AA-safe variant. The underline is not text, so it keeps the unmodified brand colour and stays visually true to the theme. */ color: var(--mvs-primary-text, var(--mvs-primary)); border-bottom-color: var(--mvs-primary); } /* Theme defense. Some themes (e.g. BuddyX) style bare it renders as a centered card; the lightbox chrome around it (Open / Download) still reaches the file. */ .mvs-lightbox-document.mvs-doc-card { width: min(340px, 80vw); height: auto; gap: 14px; padding: 40px 32px; background: var(--mvs-bg, #ffffff); border-radius: 12px; } .mvs-lightbox-document .mvs-doc-card__glyph { --mvs-doc-glyph-size: 72px; } .mvs-lightbox-document .mvs-doc-card__title { font-size: 1.05em; } @media (max-width: 480px) { .mvs-doc-card { gap: 6px; padding: 10px 12px; } .mvs-doc-card__glyph { --mvs-doc-glyph-size: 32px; } } .mvs-grid-audio-icon, .mvs-grid-generic-icon { display: inline-flex; align-items: center; justify-content: center; color: inherit; line-height: 0; } .mvs-grid-audio-icon svg, .mvs-grid-generic-icon svg { width: 34%; height: 34%; max-width: 72px; max-height: 72px; } /* ========================================================================== 30. Playlist UI ========================================================================== */ .mvs-playlist { max-width: 700px; margin: 20px auto; background: var(--mvs-surface-2); border: 1px solid var(--mvs-border-light); border-radius: 8px; overflow: hidden; } .mvs-playlist-player { padding: 16px 20px; background: var(--mvs-text); } .mvs-playlist-player audio { width: 100%; } .mvs-playlist-now-playing { padding: 10px 20px; background: var(--mvs-text); color: var(--mvs-bg); font-size: 0.95em; font-weight: 600; min-height: 20px; } .mvs-playlist-tracks { list-style: none; margin: 0; padding: 0; } .mvs-playlist-track { display: flex; align-items: center; border-bottom: 1px solid var(--mvs-border-light); transition: background 0.15s; } .mvs-playlist-track:last-child { border-bottom: none; } .mvs-playlist-track:hover { background: var(--mvs-surface-2); } .mvs-playlist-track--active { background: var(--mvs-info-bg); } .mvs-playlist-track--active:hover { background: var(--mvs-info-bg-light); } .mvs-playlist-track-btn { flex: 1; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; color: inherit; min-width: 0; } .mvs-playlist-track-num { width: 28px; text-align: center; color: var(--mvs-text-muted); font-size: 0.85em; flex-shrink: 0; } .mvs-playlist-track--active .mvs-playlist-track-num { color: var(--mvs-primary-text, var(--mvs-primary)); font-weight: 700; } .mvs-playlist-track-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .mvs-playlist-track-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mvs-playlist-track-artist { font-size: 0.82em; color: var(--mvs-text-muted); } .mvs-playlist-track-duration { color: var(--mvs-text-muted); font-size: 0.85em; flex-shrink: 0; } .mvs-playlist-track-link { padding: 12px 14px; color: var(--mvs-text-muted); text-decoration: none; font-size: 1.1em; } .mvs-playlist-track-link:hover { color: var(--mvs-primary-text, var(--mvs-primary)); } /* ========================================================================== 27. Collections & Rule Builder ========================================================================== */ .mvs-collection-card-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: var(--mvs-surface-2); border-bottom: 1px solid var(--mvs-border-light); } /* --- Collection Single Page --- */ .mvs-single-collection { max-width: var(--mvs-content-width, 1200px); margin: 0 auto; padding: 24px 16px 0; } /* Info Card */ .mvs-collection-card-info { background: var(--mvs-bg); border: 1px solid var(--mvs-border-light); border-radius: 12px; padding: 24px 28px; margin-bottom: 24px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .mvs-collection-card-title { margin: 0 0 12px; font-size: 1.6em; font-weight: 700; line-height: 1.3; color: var(--mvs-text); } .mvs-collection-card-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.9em; color: var(--mvs-text-secondary); } .mvs-collection-meta-author { display: inline-flex; align-items: center; gap: 6px; } .mvs-collection-meta-author a { color: var(--mvs-danger); text-decoration: none; font-weight: 500; } .mvs-collection-meta-author a:hover { text-decoration: underline; } .mvs-collection-avatar { border-radius: 50%; width: 24px; height: 24px; } .mvs-collection-meta-text { color: var(--mvs-text-secondary); } .mvs-collection-card-desc { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--mvs-surface-2); color: var(--mvs-text-secondary); font-size: 0.95em; line-height: 1.6; } .mvs-collection-card-desc p { margin: 0; } /* Search bar — reuses .mvs-explore-search layout */ .mvs-collection-search { margin-bottom: 24px; } .mvs-collection-search form { display: flex; gap: 0; } .mvs-collection-search-input { flex: 1; padding: 10px 16px; border: 1px solid var(--mvs-border); border-radius: 8px 0 0 8px; font-size: 0.95em; background: var(--mvs-bg); transition: border-color 0.2s; } .mvs-collection-search-input:focus { outline: none; border-color: var(--mvs-primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); } .mvs-collection-search-btn { padding: 10px 20px; border: 1px solid var(--mvs-primary); border-left: 0; border-radius: 0 8px 8px 0; background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); font-size: 0.95em; font-weight: 500; cursor: pointer; transition: background 0.2s; } .mvs-collection-search-btn:hover { background: var(--mvs-primary-hover); } /* Rules display (inline in meta) */ .mvs-collection-card-meta .mvs-rule-pill { padding: 3px 10px; border-radius: 16px; font-size: 0.85em; background: var(--mvs-surface-2); color: var(--mvs-text-secondary); font-weight: 500; } .mvs-collection-type-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; background: var(--mvs-info-bg); color: var(--mvs-primary-text, var(--mvs-primary)); } .mvs-collection-count { font-size: 0.85em; color: var(--mvs-text-secondary); } .mvs-collection-rules-preview { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .mvs-rule-pill { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75em; background: rgba(var(--mvs-primary-rgb), 0.15); color: var(--mvs-primary-text, var(--mvs-primary)); border: 1px solid rgba(var(--mvs-primary-rgb), 0.30); } /* Type toggle */ .mvs-collection-type-toggle { display: flex; gap: 0; border: 1px solid var(--mvs-border); border-radius: 6px; overflow: hidden; width: fit-content; } .mvs-toggle-btn { padding: 8px 20px; border: none; background: var(--mvs-bg); cursor: pointer; font-size: 0.9em; color: var(--mvs-text-secondary); transition: background 0.15s, color 0.15s; } .mvs-toggle-btn:not(:last-child) { border-right: 1px solid var(--mvs-border); } .mvs-toggle-btn.active { background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); } .mvs-field-hint { margin-top: 6px; font-size: 0.85em; color: var(--mvs-text-muted); font-style: italic; } /* Rule builder */ .mvs-rules-builder { margin-top: 16px; } .mvs-rules-builder>label { display: block; font-weight: 600; margin-bottom: 10px; } .mvs-rules-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .mvs-rule-row { display: flex; gap: 8px; align-items: center; } .mvs-rule-row select, .mvs-rule-row input { padding: 8px 10px; border: 1px solid var(--mvs-border); border-radius: 4px; font-size: 0.9em; } .mvs-rule-key { min-width: 140px; flex: 0 0 auto; } .mvs-rule-value, .mvs-rule-value-text { flex: 1; min-width: 120px; } .mvs-rule-remove { flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--mvs-border); border-radius: 4px; background: var(--mvs-bg); color: var(--mvs-danger); font-size: 1.2em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .mvs-rule-remove:hover, .mvs-rule-remove:focus { background: var(--mvs-danger-bg); color: var(--mvs-danger); border-color: var(--mvs-danger); } .mvs-rules-preview { margin-top: 12px; padding: 10px 14px; background: var(--mvs-success-bg); border-radius: 6px; font-size: 0.9em; color: var(--mvs-success); font-weight: 500; } /* Wide modal variant for collection rule builder */ .mvs-modal--wide { max-width: 680px; } @media (max-width: 600px) { .mvs-rule-row { flex-wrap: wrap; } .mvs-rule-key { min-width: 100%; } } /* Section 27 "Theme Compatibility — Reign / BuddyBoss / Generic" * removed. Audit summary: * * - .theme-flavor scoped rules — dead: no PHP/JS/template in the plugin * emits .theme-flavor, and no theme adds it to . Every rule was * a no-op. * - .mvs-bp-upload-btn scoped rules — dead: the upload button is * emitted with id="mvs-bp-upload-btn" and class="mvs-btn", never with * class="mvs-bp-upload-btn". Rules were also no-ops. * - .buddyboss-theme .mvs-upload-dropzone / .mvs-upload-block — * .mvs-upload-* only appears inside the media-upload Gutenberg block, * which doesn't render inside BP surfaces; the rule never matched. * Additionally, a dangling `.theme-flavor` selector with no rule body * on the line above was silently hijacking this selector list, so the * rules were doubly broken. * - .buddyboss-theme #mvs-activity-media-btn — redundant with the * consolidated #mvs-activity-media-btn rule now in bp-integration.css * (same display/align/gap values). * - .wb-reign-theme #whats-new-form #mvs-activity-media-btn margin-left * — the only live theme-compat rule. Moved to bp-integration.css * (Theme compatibility section) with the selector updated to scope * on .mvs-activity-media-btn-wrap since that's now the flex row * anchor (button no longer lays out on its own). * - .mvs-bp-upload-btn, #mvs-activity-media-btn { max-width: 100% } — * the button now lives inside .mvs-activity-media-btn-wrap which * already has width: 100%; box-sizing: border-box on all button * children via box-sizing: border-box inheritance from the baseline * reset in bp-integration.css. No longer needed. */ /* ========================================================================== 26. Album Placeholder ========================================================================== */ .mvs-grid-item-placeholder--album { background: linear-gradient(135deg, #6c757d, #495057); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .mvs-grid-album-icon { font-size: 36px; opacity: 0.8; } .mvs-grid-item-placeholder--collection { background: linear-gradient(135deg, #4a90d9, #357abd); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .mvs-grid-collection-icon { font-size: 36px; opacity: 0.8; } .mvs-collection-card .mvs-collection-type-badge { position: absolute; top: 8px; right: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .mvs-collection-card .mvs-dashboard-card-thumb { position: relative; } .mvs-collection-card .mvs-dashboard-card-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mvs-collection-card .mvs-collection-rules-preview { max-height: 52px; overflow: hidden; } /* ========================================================================== 27. Notification Bell ========================================================================== */ .mvs-dashboard-header { display: flex; align-items: center; gap: 16px; } .mvs-notification-bell { position: relative; cursor: pointer; margin-left: auto; user-select: none; } .mvs-notification-bell-icon { font-size: 1.4em; } .mvs-notification-badge { position: absolute; top: -6px; right: -8px; background: var(--mvs-danger); color: var(--mvs-bg); font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; padding: 0 4px; } .mvs-notification-dropdown { position: absolute; top: 100%; right: 0; width: 340px; max-height: 400px; overflow-y: auto; background: var(--mvs-bg, #fff); border: 1px solid var(--mvs-border-light, #ddd); border-radius: 8px; box-shadow: var(--mvs-shadow-lg, 0 8px 32px rgba(0, 0, 0, 0.18)); z-index: 998; margin-top: 8px; } .mvs-notification-dropdown-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--mvs-border-light); /* Pin the header while the notification list scrolls (the parent .mvs-notification-dropdown is the overflow-y:auto scroll container). */ position: sticky; top: 0; background: var(--mvs-bg, #fff); z-index: 1; } .mvs-notification-list { list-style: none; margin: 0; padding: 0; } .mvs-notification-item { padding: 10px 16px; border-bottom: 1px solid var(--mvs-surface-2); font-size: 0.9em; display: flex; flex-direction: column; gap: 2px; } .mvs-notification-item:last-child { border-bottom: none; } .mvs-notification-unread { background: var(--mvs-info-bg); } .mvs-notification-time { color: var(--mvs-text-muted); font-size: 0.8em; } .mvs-notification-empty { padding: 20px 16px; text-align: center; color: var(--mvs-text-muted); margin: 0; } /* ========================================================================== 28. Comment Edit/Delete Actions (Base layout rules for .mvs-comment-header/.mvs-comment-avatar/ .mvs-comment-actions live in section 13. Only edit-form-specific styles belong here.) ========================================================================== */ .mvs-comment-edit-form { margin-top: 6px; } .mvs-comment-edit-textarea { width: 100%; padding: 8px; border: 1px solid var(--mvs-border); border-radius: 4px; font-size: 0.9em; resize: vertical; box-sizing: border-box; } .mvs-comment-edit-actions { display: flex; gap: 6px; margin-top: 6px; } /* ========================================================================== 29. Follow Button ========================================================================== */ .mvs-follow-btn-wrap { display: inline-flex; align-items: center; flex-shrink: 0; } .mvs-follow-btn { border-radius: 8px; padding: 6px 16px; font-size: 0.8125rem; font-weight: 600; transition: all 0.2s; background: var(--mvs-primary); /* Always use --mvs-on-primary (#fff) here; never --mvs-bg which flips to dark in dark-mode themes and becomes unreadable on the red bg. */ color: var(--mvs-on-primary, #ffffff); border: 1px solid var(--mvs-primary); } .mvs-follow-btn:hover { background: var(--mvs-primary-hover); border-color: var(--mvs-primary-hover); color: var(--mvs-on-primary, #ffffff); } .mvs-follow-btn.active { background: var(--mvs-bg); color: var(--mvs-text); border-color: var(--mvs-border); } .mvs-follow-btn.active:hover { background: var(--mvs-surface-2); border-color: var(--mvs-border); } /* ========================================================================== 30. Album Cover Picker ========================================================================== */ /* `.mvs-media-picker-item` is declared in §19 with its full box, including `position: relative`. The duplicate rule that used to sit here restated only that one property — Coding Rule 12 forbids duplicate class rules. */ .mvs-media-picker-cover-btn { position: absolute; inset-block-end: 4px; inset-inline-start: 4px; background: rgba(0, 0, 0, 0.7); color: var(--mvs-bg); border: none; border-radius: 4px; padding: 2px 8px; min-block-size: 24px; /* WCAG 2.2 target-size floor on fine pointers; 44px on touch below. */ font-size: 11px; cursor: pointer; opacity: 0; transition: opacity 0.2s; z-index: 3; } .mvs-media-picker-item:hover .mvs-media-picker-cover-btn, .mvs-media-picker-cover-btn:focus-visible { opacity: 1; } /* Revealed on keyboard focus but drew no ring (the theme strips button outlines), so a keyboard user could not see which thumbnail's button was active. Basecamp 10320657228. */ .mvs-media-picker-cover-btn:focus-visible { outline: 2px solid var(--mvs-primary); outline-offset: 2px; } /* A hover-only reveal is unreachable on touch: there is no hover on a phone or tablet, so "Set Cover" was invisible and effectively untappable — while the hint directly above the picker instructs the member to click it. On a coarse pointer the button is simply always visible (Basecamp 10190678139). */ @media (hover: none), (pointer: coarse) { /* Two classes to outrank the global `[class*="mvs-"] button` 44px touch floor, which otherwise grew the chip back to 44px. */ .mvs-media-picker-item .mvs-media-picker-cover-btn { opacity: 1; min-height: 24px; } /* The touch floor is met by the HIT AREA, not the chip. Growing the chip itself to 44px covered about 40% of a small tile (Basecamp 10320784172), so the chip keeps its 24px corner size and this invisible layer extends what a finger can hit. It grows upward, toward the tile's centre, and only 4px (the chip's own offset) at the edges, so it never spills past the tile into its neighbour. */ .mvs-media-picker-cover-btn::before { content: ""; position: absolute; inset-block: calc(24px - var(--mvs-touch-min, 44px)) -4px; inset-inline: -4px; min-inline-size: var(--mvs-touch-min, 44px); } } .mvs-media-picker-cover-badge { position: absolute; top: 4px; left: 4px; background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 700; z-index: 3; } .mvs-media-picker-cover { outline: 3px solid var(--mvs-primary); outline-offset: -3px; } /* ========================================================================== 27. Grid Pagination ========================================================================== */ .mvs-grid-pagination { margin-top: 24px; text-align: center; } .mvs-grid-pagination-info { display: block; margin-bottom: 12px; font-size: 13px; color: var(--mvs-text-secondary); } .mvs-grid-pagination-links ul { display: flex; justify-content: center; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .mvs-grid-pagination-links li { margin: 0; } .mvs-grid-pagination-links a, .mvs-grid-pagination-links span { display: inline-block; padding: 8px 14px; border: 1px solid var(--mvs-border-light); border-radius: 4px; text-decoration: none; font-size: 13px; color: var(--mvs-text); background: var(--mvs-bg); transition: all 0.15s; } .mvs-grid-pagination-links a:hover { background: var(--mvs-surface-2); border-color: var(--mvs-border-light); } .mvs-grid-pagination-links .current { background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); border-color: var(--mvs-primary); font-weight: 600; } .mvs-grid-pagination-links .dots { border-color: transparent; background: transparent; } /* ========================================================================== 28. Upload Form Fixes ========================================================================== */ .mvs-upload-block { max-width: 680px; margin: 0 auto; } .mvs-upload-dropzone { border: 2px dashed var(--mvs-border); border-radius: 8px; padding: 40px 20px; text-align: center; cursor: pointer; transition: all 0.2s; background: var(--mvs-surface-2); } .mvs-upload-dropzone:hover, .mvs-upload-dropzone.mvs-dragover { border-color: var(--mvs-primary); background: var(--mvs-info-bg); } .mvs-upload-icon { color: var(--mvs-text-muted); margin-bottom: 12px; } .mvs-upload-text { margin: 0 0 16px; font-size: 14px; color: var(--mvs-text-secondary); } .mvs-upload-input { display: none; } .mvs-upload-privacy { margin-top: 12px; padding: 6px 12px; border: 1px solid var(--mvs-border); border-radius: 4px; font-size: 13px; } .mvs-upload-fields { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; } /* Text fields only -- a bare `input` here also caught the "share as story" checkbox and stretched it to the full row width. This block duplicates the .mvs-upload-fields rules at ~3644 with different values; the two should be consolidated, but that is a wider cleanup than this fix. Basecamp 10313183837. */ .mvs-upload-fields input[type="text"], .mvs-upload-fields textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--mvs-border); border-radius: 4px; font-size: 13px; box-sizing: border-box; } /* Section 29 "BP Activity Media Button Alignment" — all rules moved to * bp-integration.css. Section header retained as a placeholder so * renumbering in a later commit stays mechanical. */ /* ========================================================================== 30. Single Media Page Fixes ========================================================================== */ .mvs-media-content img { max-width: 100%; height: auto; border-radius: 4px; } /* ONE declaration. There were two, at identical specificity with no media query between them — `12px 24px` earlier in the file and this one later — so the first was dead code and its `justify-content: space-between` never applied to anything. The horizontal value is 24px so the bar's contents line up with the title and body of the card it closes; at 16px it sat 8px to their left on every media page. */ .mvs-social-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px var(--mvs-space-4); border-top: 1px solid var(--mvs-border-light); } .mvs-reactions { display: flex; gap: 4px; } .mvs-reaction-btn { display: inline-flex; align-items: center; gap: 3px; padding: 5px 10px; border: 1px solid var(--mvs-border); border-radius: 20px; background: var(--mvs-bg); cursor: pointer; font-size: 14px; transition: all 0.15s; } .mvs-reaction-btn:hover, .mvs-reaction-btn.active { background: var(--mvs-info-bg); border-color: var(--mvs-primary); } .mvs-reaction-btn .mvs-count { font-size: 12px; color: var(--mvs-text-secondary); } .mvs-social-bar button.active .mvs-count { color: var(--mvs-bg); } /* Read-only reactions for logged-out users */ .mvs-reactions--readonly .mvs-reaction-btn { cursor: default; opacity: 0.7; pointer-events: none; } .mvs-favorite-btn { padding: 5px 12px; border: 1px solid var(--mvs-border); border-radius: 20px; background: var(--mvs-bg); cursor: pointer; font-size: 13px; transition: all 0.15s; } .mvs-favorite-btn:hover, .mvs-favorite-btn.active { background: var(--mvs-danger-bg); border-color: var(--mvs-danger); color: var(--mvs-danger); } .mvs-share-btn { padding: 5px 12px; border: 1px solid var(--mvs-border); border-radius: 20px; background: var(--mvs-bg); cursor: pointer; font-size: 13px; transition: all 0.15s; } .mvs-share-btn:hover { border-color: var(--mvs-primary); color: var(--mvs-primary-text, var(--mvs-primary)); } .mvs-view-count { margin-left: auto; font-size: 0.8125rem; color: var(--mvs-text-muted); } /* Single Media Responsive */ @media (max-width: 680px) { .mvs-single-media { padding: 0; } .mvs-media-article { border-radius: 0; border-left: none; border-right: none; } } @media (max-width: 480px) { .mvs-media-header { padding: 12px var(--mvs-space-3); } .mvs-media-title { font-size: 1.25em; } .mvs-social-bar { padding: 10px 12px; gap: 6px; } .mvs-reaction-btn { padding: 4px 8px; font-size: 13px; } .mvs-comments-section { padding: 10px var(--mvs-space-3) var(--mvs-space-3); } .mvs-media-description { padding: 10px var(--mvs-space-3) 0; } .mvs-media-footer { padding: 6px var(--mvs-space-3) var(--mvs-space-3); } } /* ========================================================================== 31. Explore Page Grid Fixes ========================================================================== */ /* Section 31 held two EMPTY media blocks (767 and 480). They shipped nothing and inflated the breakpoint count that made this file look like it had more responsive behaviour than it does. Removed rather than kept as placeholders. */ /* ========================================================================== 32. Profile Header (Dashboard) & Profile Edit ========================================================================== */ /* The profile CARD that lived above the rail is gone — its avatar, name, bio and buttons became the rail head plus the `profile` section, so its rules go with it rather than lingering as selectors nothing emits (Coding Rule 12). The edit FORM's own styling continues below; only the card is removed. */ .mvs-dashboard-profile-edit-btn { flex-shrink: 0; } /* Inline Edit Form */ /* `padding-top: 0.5rem` used to live here. It predated the panel wrapper and, being a later rule of equal specificity, out-specified it — Edit profile was the one tab whose content started higher than every other. Removed rather than zeroed, so the panel's own padding applies on all four sides like every other tab. */ .mvs-profile-form-inline { display: flex; flex-direction: column; gap: 1rem; } .mvs-profile-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .mvs-profile-form-actions { display: flex; gap: 0.5rem; } /* Standalone Profile Edit Page */ .mvs-profile-edit { max-width: 600px; margin: 2rem auto; padding: 0 1rem; } .mvs-profile-edit h2 { font-size: 1.5rem; margin-bottom: 1.5rem; } /* Messages */ .mvs-profile-message { padding: 0.75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: 0.875rem; } .mvs-profile-message--success { background: var(--mvs-success-bg); color: var(--mvs-success); border: 1px solid #c3e6cb; } .mvs-profile-message--error { background: var(--mvs-danger-bg); color: var(--mvs-danger); border: 1px solid #f5c6cb; } /* Avatar Section */ .mvs-profile-avatar-section { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 2rem; padding: 1.5rem; background: var(--mvs-surface-2); border-radius: 12px; } .mvs-profile-avatar-preview { flex-shrink: 0; } .mvs-profile-avatar-img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--mvs-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .mvs-profile-avatar-actions { display: flex; flex-direction: column; gap: 0.5rem; } .mvs-profile-avatar-upload-label { cursor: pointer; display: inline-block; } .mvs-profile-avatar-input { display: none; } .mvs-profile-avatar-remove { font-size: 0.8125rem; color: var(--mvs-danger); background: none; border: none; cursor: pointer; padding: 0; text-align: left; } .mvs-profile-avatar-remove:hover { text-decoration: underline; } .mvs-profile-avatar-hint { font-size: 0.75rem; color: var(--mvs-text-muted); margin: 0; } /* Form Fields */ .mvs-profile-form { display: flex; flex-direction: column; gap: 1.25rem; } .mvs-profile-field { display: flex; flex-direction: column; gap: 0.375rem; } .mvs-profile-field label { font-weight: 600; font-size: 0.875rem; color: var(--mvs-text); } .mvs-profile-field input[type="text"], .mvs-profile-field textarea { padding: 0.625rem 0.75rem; border: 1px solid var(--mvs-border); border-radius: 6px; font-size: 0.9375rem; font-family: inherit; transition: border-color 0.2s; width: 100%; box-sizing: border-box; } .mvs-profile-field input[type="text"]:focus, .mvs-profile-field textarea:focus { border-color: var(--mvs-primary); outline: none; box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.15); } .mvs-profile-field textarea { resize: vertical; min-height: 80px; } /* Actions */ .mvs-profile-actions { margin-top: 0.5rem; } /* * Colour floor for the button base. * * `.mvs-btn` carries layout only; every colour lives on a modifier * (--primary / --secondary / --danger). That is fine until a call site prints * the base class alone — "Add Media" on an album and "Save" on the collection * form both do — and then the button falls through to the browser's UA styling * (`buttonface` / `ButtonText`). UA button colours answer to `color-scheme`, * not to our tokens, so on a dark theme the pill stays light while the theme * repaints the label: white on white (Basecamp 10259504401). * * `:where()` keeps this at ZERO specificity, so every modifier still wins no * matter which stylesheet it lives in or what order the sheets load — this is * a floor, not a default that has to be fought. Pro's own base rules * (gamification.css, dashboard-connectors.css) set no colours either and are * covered by the same floor. */ :where(.mvs-btn) { background: var(--mvs-surface-2); color: var(--mvs-text); } /* Shared button styles (used across profile and dashboard) */ .mvs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.625rem 1.25rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; text-decoration: none; line-height: 1.4; } /* Icon sizing inside any .mvs-btn. Lucide's default is 24x24; at * that size it towers over 14px label text. Cap to 16px and inherit * the button color so the icon pairs properly with the label. The * `[data-lucide]` selector covers the brief moment before * lucide.createIcons() swaps the placeholder for . */ .mvs-btn svg, .mvs-btn [data-lucide] { width: 16px; height: 16px; stroke-width: 2; flex-shrink: 0; color: inherit; } /* Small-variant buttons use smaller labels, so scale the icon down too. */ .mvs-btn.mvs-btn--small svg, .mvs-btn.mvs-btn--sm svg, .mvs-btn.mvs-btn--small [data-lucide], .mvs-btn.mvs-btn--sm [data-lucide] { width: 14px; height: 14px; } .mvs-btn--primary { /* --mvs-btn-primary-* is defined once in the token block above and is what the other three copies of this button reference. Never put a theme surface/bg token in `color` here; those flip dark in dark-mode themes. */ background: var(--mvs-btn-primary-bg); color: var(--mvs-btn-primary-fg); border-color: var(--mvs-btn-primary-bg); } .mvs-btn--primary:hover, .mvs-btn--primary:focus, .mvs-btn--primary:visited { background: var(--mvs-btn-primary-bg-hover); color: var(--mvs-btn-primary-fg-hover); } .mvs-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; } /* Secondary buttons are a NEUTRAL surface, deliberately distinct from the red primary. Do NOT borrow the theme's --button-* tokens here: BuddyX/Reign set --button-background-color to their PRIMARY button color (often red), which made the secondary button render identical to primary with mismatched text. The plugin's own --mvs-* surface/text tokens already flip for dark mode. */ .mvs-btn.mvs-btn--secondary { background: var(--mvs-surface-2); color: var(--mvs-text); border: 1px solid var(--mvs-border); } .mvs-btn.mvs-btn--secondary:hover, .mvs-btn.mvs-btn--secondary:focus { background: var(--mvs-border-light); color: var(--mvs-text); border-color: var(--mvs-border); } /* Secondary button icons keep a neutral, theme-agnostic color — some themes expose --button-text-color in red/accent, which leaked into lucide SVG fill (e.g. Report flag rendered red). Matches the lightbox action convention. */ .mvs-btn.mvs-btn--secondary svg, .mvs-btn.mvs-btn--secondary [data-lucide] { color: var(--mvs-text-secondary); } .mvs-btn.mvs-btn--secondary:hover svg, .mvs-btn.mvs-btn--secondary:focus svg, .mvs-btn.mvs-btn--secondary:hover [data-lucide], .mvs-btn.mvs-btn--secondary:focus [data-lucide] { color: var(--mvs-text); } .mvs-btn--text { background: none; border: none; padding: 0.25rem 0.5rem; border-radius: 4px; color: var(--mvs-text-secondary); transition: background 0.15s, color 0.15s; } .mvs-btn--text:hover { background: rgba(214, 54, 56, 0.08); color: var(--mvs-danger); border: none; } /* Block/unblock toggle: de-emphasized next to Follow/Message; danger tint when active or hovered so the destructive action reads clearly. */ .mvs-block-toggle { color: var(--mvs-text-secondary); } .mvs-block-toggle:hover, .mvs-block-toggle:focus, .mvs-block-toggle--blocked { color: var(--mvs-danger); } /* Mobile */ @media (max-width: 480px) { .mvs-profile-avatar-section { flex-direction: column; text-align: center; } .mvs-profile-avatar-actions { align-items: center; } .mvs-profile-avatar-remove { text-align: center; } .mvs-profile-field-row { grid-template-columns: 1fr; } } /* ========================================================================== 33a. Search Tabs & User Search ========================================================================== */ .mvs-search-bar { display: flex; align-items: center; background: var(--mvs-bg); /* Pair the foreground with the background this component sets; without it the text inherited the ambient theme colour and went unreadable in dark mode (measured 1.07-1.38:1). */ color: var(--mvs-text); border: 1.5px solid var(--mvs-border); border-radius: 100px; padding: 5px 5px 5px 6px; gap: 0; transition: border-color 0.2s, box-shadow 0.2s; max-width: 600px; } .mvs-search-bar:focus-within { border-color: var(--mvs-primary); box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.12); } .mvs-search-mode { display: flex; background: var(--mvs-surface-2); /* Pair the foreground with the background this component sets; without it the text inherited the ambient theme colour and went unreadable in dark mode (measured 1.07-1.38:1). */ color: var(--mvs-text); border-radius: 100px; padding: 2px; flex-shrink: 0; gap: 2px; } .mvs-search-mode-btn { padding: 5px 14px; border: none; background: transparent; border-radius: 100px; cursor: pointer; font-size: 0.8125rem; font-weight: 500; color: var(--mvs-text-secondary); transition: background 0.15s, color 0.15s; white-space: nowrap; } .mvs-search-mode-btn.active { background: var(--mvs-bg); color: var(--mvs-primary-text, var(--mvs-primary)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .mvs-search-field { display: flex; align-items: center; flex: 1; padding: 0 12px; gap: 8px; min-width: 0; } .mvs-search-icon { width: 16px; height: 16px; color: var(--mvs-text-muted); flex-shrink: 0; } .mvs-search-field input { flex: 1; border: none; outline: none; background: transparent; font-size: 0.9375rem; color: var(--mvs-text); padding: 6px 0; min-width: 0; } /* The reset above loses to the theme. Reign styles every text input with `input[type="text"], input[type="search"], ... { border: 1px solid; }` at specificity (0,1,1) - identical to `.mvs-search-field input`, so the tie is broken by load order and the theme's sheet loads last. The result is a third box drawn inside the search pill. Matching the type attribute takes us to (0,2,1), which wins on merit rather than with !important. */ .mvs-search-field input[type="text"], .mvs-search-field input[type="search"] { border: none; border-radius: 0; background: transparent; box-shadow: none; } .mvs-search-field input#mvs-search-input:focus { outline: none; } .mvs-search-field input:focus-visible { outline: 2px solid var(--mvs-primary, #0073aa); outline-offset: -2px; } .mvs-search-field input:focus-visible { outline: 2px solid var(--mvs-primary); outline-offset: -2px; border-radius: 2px; } .mvs-search-field input::placeholder { color: var(--mvs-text-muted); } .mvs-user-search-results { margin-top: 12px; } .mvs-user-search-empty { text-align: center; color: var(--mvs-text-secondary); padding: 16px; } .mvs-user-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--mvs-border-light); border-radius: 8px; margin-bottom: 8px; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s; } .mvs-user-card:hover { border-color: var(--mvs-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .mvs-user-card-avatar { border-radius: 50%; object-fit: cover; } .mvs-user-card-info { display: flex; flex-direction: column; gap: 2px; } .mvs-user-card-info strong { font-size: 0.9375rem; color: var(--mvs-text); } .mvs-user-card-info span { font-size: 0.8125rem; color: var(--mvs-text-muted); } /* Login prompt links styled like buttons */ .mvs-login-prompt { opacity: 0.7; cursor: pointer; text-decoration: none; } .mvs-login-to-comment, .mvs-comment-denied { text-align: center; padding: 12px; color: var(--mvs-text-secondary); } /* --mvs-primary is a FILL colour; as text it measures 4.36:1, under the 4.5:1 AA floor. --mvs-primary-text is the same hue darkened to pass (Basecamp 10253005724). */ .mvs-login-to-comment a { color: var(--mvs-primary-text, var(--mvs-primary)); } /* ========================================================================== 33. Logged-Out CTA Banner ========================================================================== */ .mvs-logged-out-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* Fixed purple gradient in both modes — was var(--mvs-bg), which flips to near-black in dark mode (dark text on purple). Keep it white. */ color: #fff; padding: 14px 24px; border-radius: 8px; margin: 0 auto 20px; max-width: var(--mvs-content-width, 1200px); position: relative; } .wb-grid>.mvs-logged-out-banner { flex: 0 0 100%; } .mvs-logged-out-banner__content { font-size: 0.9375rem; } .mvs-logged-out-banner__content strong { font-weight: 700; } .mvs-logged-out-banner__actions { display: flex; gap: 8px; flex-shrink: 0; margin-right: 15px; } .mvs-logged-out-banner__actions .mvs-btn--primary { /* White button on the purple banner in both modes — was var(--mvs-bg), which flips dark in dark mode and breaks the intended white pill. */ background: #fff; /* #4c51bf, not #667eea. The banner's own indigo scored 3.66 on the white pill — a fail, on the single control that decides whether a visitor joins at all (Basecamp 10252222150). Same hue family, just dark enough: 6.49. Not `--mvs-primary`, because this pill sits on a fixed purple gradient that does not follow the theme, so its text must not either. */ color: #4c51bf; border: none; } .mvs-logged-out-banner__actions .mvs-btn--secondary { background: transparent; /* Fixed white, for the reason the comment above already gives: the banner is a fixed purple gradient in BOTH modes, and `var(--mvs-bg)` flips to near-black in dark — dark text on purple. The primary button was fixed for exactly this and the secondary was left behind. */ color: #fff; border: 1px solid rgba(255, 255, 255, 0.6); } .mvs-logged-out-banner__close { background: none; border: none; /* Full white, not 70% — at 0.7 on the gradient this was the faintest control on a banner shown to every visitor. */ color: #fff; font-size: 20px; cursor: pointer; /* Was 20x28. A dismiss control needs to be hittable, and this one sits in a corner where a thumb is least accurate. Centring the glyph in a touch-sized box costs no layout, since the button is absolutely positioned. */ display: inline-flex; align-items: center; justify-content: center; min-width: var(--mvs-touch-min, 44px); min-height: var(--mvs-touch-min, 44px); padding: 0; line-height: 1; position: absolute; top: 8px; right: 4px; } .mvs-logged-out-banner__close:hover { /* Not `var(--mvs-bg)`: same dark-mode flip as the buttons above. */ color: #fff; background: none; border: none; } @media (max-width: 600px) { .mvs-logged-out-banner { flex-direction: column; text-align: center; padding: 16px 20px 20px; } } /* ========================================================================== 34. Frontend Empty States ========================================================================== */ .mvs-empty-state-frontend { text-align: center; padding: 48px 24px; color: var(--mvs-text-secondary); } .mvs-empty-state-icon { display: block; font-size: 48px; margin-bottom: 12px; line-height: 1; opacity: 0.7; } /* These were emoji sized by `font-size`. A Lucide ignores that and ships at 24x24, so it needs explicit dimensions to keep the 48px presence the empty state was designed around. `currentColor` is the point of the swap: the glyph now takes the text colour and follows dark mode, which an emoji never could (Basecamp 10253006229). */ .mvs-empty-state-icon svg, .mvs-empty-state-icon [data-lucide] { width: 48px; height: 48px; stroke-width: 1.5; color: inherit; margin-inline: auto; } .mvs-empty-state-frontend h3 { margin: 0 0 8px; font-size: 1.125rem; color: var(--mvs-text); } .mvs-empty-state-frontend p { margin: 0 0 16px; font-size: 0.9375rem; color: var(--mvs-text-secondary); } /* ----------------------------------------------------------------------- Plugin-branded 404 (mvs-empty-state-frontend--404) Uses the same design language as the auth gate — centered card with a gradient accent, circular icon halo, and popular-tag row below the primary CTA. ----------------------------------------------------------------------- */ .mvs-archive--404 { display: flex; justify-content: center; padding: clamp(32px, 8vw, 96px) 16px; } .mvs-empty-state-frontend--404 { position: relative; width: 100%; max-width: 560px; margin: 0; padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px); background: var(--mvs-surface, #fff); border-radius: var(--mvs-radius-lg, 16px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 48px -12px rgba(15, 23, 42, 0.18); overflow: hidden; box-sizing: border-box; } .mvs-empty-state-frontend--404::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--mvs-primary, #0073aa) 0%, #6a5acd 50%, #ff6aa6 100%); } .mvs-empty-state-frontend__glyph { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin: 0 auto 20px; border-radius: 50%; background: rgba(var(--mvs-primary-rgb, 0, 115, 170), 0.08); color: var(--mvs-primary-text, var(--mvs-primary)); z-index: 1; } .mvs-empty-state-frontend__glyph svg { width: 44px; height: 44px; stroke-width: 1.75; } .mvs-empty-state-frontend__title { margin: 0 0 12px; font-family: var(--mvs-font-heading, inherit); font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; line-height: 1.25; color: var(--mvs-text, #1e1e1e); } .mvs-empty-state-frontend__lede { margin: 0 auto 28px; max-width: 420px; font-size: 15px; line-height: 1.55; color: var(--mvs-text-secondary, #646970); } .mvs-empty-state-frontend--404 .mvs-empty-state-actions { display: flex; justify-content: center; margin-bottom: 24px; } .mvs-empty-state-frontend--404 .mvs-btn--primary { min-width: 200px; padding: 12px 28px; font-size: 15px; font-weight: 600; } .mvs-empty-state-frontend__tags-label { margin: 12px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mvs-text-muted, #a7aaad); } .mvs-empty-state-frontend--404 .mvs-empty-state-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .mvs-empty-state-frontend--404 .mvs-tag-cloud-item { padding: 6px 14px; border-radius: var(--mvs-radius-pill, 100px); background: var(--mvs-surface-2, #f6f7f7); color: var(--mvs-text, #1e1e1e); font-size: 13px; text-decoration: none; transition: background 150ms ease, color 150ms ease; } .mvs-empty-state-frontend--404 .mvs-tag-cloud-item:hover, .mvs-empty-state-frontend--404 .mvs-tag-cloud-item:focus-visible { background: rgba(var(--mvs-primary-rgb, 0, 115, 170), 0.08); color: var(--mvs-primary-text, var(--mvs-primary)); } @media (max-width: 640px) { .mvs-archive--404 { padding: 24px 12px 48px; } .mvs-empty-state-frontend--404 { padding: 28px 20px 32px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(15, 23, 42, 0.15); } .mvs-empty-state-frontend__glyph { width: 72px; height: 72px; margin-bottom: 16px; } .mvs-empty-state-frontend__glyph svg { width: 40px; height: 40px; } .mvs-empty-state-frontend--404 .mvs-btn--primary { width: 100%; min-width: 0; } } /* ========================================================================== 34b. Profile Completion Prompt ========================================================================== */ .mvs-profile-prompt { display: flex; align-items: center; gap: 10px; background: var(--mvs-warning-bg); border: 1px solid var(--mvs-warning); border-radius: 6px; padding: 10px 16px; margin-bottom: 16px; font-size: 0.875rem; position: relative; } .mvs-profile-prompt-icon { font-size: 20px; flex-shrink: 0; } .mvs-profile-prompt-text { flex: 1; color: var(--mvs-warning); } .mvs-profile-prompt-text .mvs-dashboard-profile-edit-btn { background: transparent; color: var(--mvs-warning); font-weight: 700; text-decoration: underline; border: 0; padding: 0; } .mvs-profile-prompt-text .mvs-dashboard-profile-edit-btn:hover, .mvs-profile-prompt-text .mvs-dashboard-profile-edit-btn:focus { background: transparent; color: var(--mvs-primary-text, var(--mvs-primary)); border: 0; padding: 0; box-shadow: none; } .mvs-profile-prompt-close { background: none; border: none; font-size: 18px; cursor: pointer; color: var(--mvs-warning); padding: 4px; line-height: 1; } .mvs-profile-prompt-close:hover, .mvs-profile-prompt-close:focus { color: var(--mvs-primary-text, var(--mvs-primary)); background: none; border: none; } /* ========================================================================== 34b. Touch target floor — one rule, not a list ========================================================================== */ /* Every interactive plugin control clears --mvs-touch-min on a touch viewport. This replaces per-surface selector lists: messaging.css raised five chat controls by name, reported "0 under the floor", and the profile-prompt close still shipped at 17x22 because it renders only for a member with no profile and so was never on screen during that sweep (card 10285849953). Same reasoning as the [hidden] rule above: an allowlist guarantees the next control added is missed too. min-height only. A blanket min-width overflows controls that are meant to stretch or sit inline — the chat tab row is the documented case — so width floors stay with the icon-only controls that need them. Height is the dimension these misses actually fail on. */ @media (max-width: 640px) { [class*="mvs-"] button, button[class*="mvs-"], [class*="mvs-"] [role="button"], a[class*="mvs-btn"] { min-height: var(--mvs-touch-min, 44px); } /* Icon-only controls have no text to give them width. */ .mvs-profile-prompt-close { min-width: var(--mvs-touch-min, 44px); } } /* ========================================================================== 35. Accessibility — Focus & Reduced Motion ========================================================================== */ /* Visible focus ring on all interactive elements */ .mvs-btn:focus-visible, .mvs-reaction-btn:focus-visible, .mvs-favorite-btn:focus-visible, .mvs-share-btn:focus-visible, .mvs-follow-btn:focus-visible, .mvs-dashboard-tab:focus-visible, .mvs-comment-form button:focus-visible, .mvs-comment-form textarea:focus-visible, .mvs-tag-cloud-item:focus-visible, .mvs-notification-bell:focus-visible, .mvs-modal-close:focus-visible, .mvs-dashboard-dropzone:focus-visible, .mvs-load-more-btn:focus-visible { outline: 2px solid var(--mvs-primary); outline-offset: 2px; } /* Focus trap visual — modals */ .mvs-modal:focus-within { box-shadow: 0 0 0 4px rgba(0, 115, 170, 0.15); } /* Respect prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 36. Mobile Touch Targets & Responsiveness ========================================================================== */ @media (max-width: 767px) /* below --mvs-bp-tablet */ { /* Ensure minimum 44px touch targets */ .mvs-reaction-btn { min-width: 44px; min-height: 44px; padding: 8px 10px; } .mvs-favorite-btn, .mvs-share-btn { min-height: 44px; padding: 10px 14px; } .mvs-follow-btn { min-height: 44px; padding: 10px 16px; } /* Increase spacing between action buttons */ .mvs-social-actions { gap: 8px; } .mvs-social-actions-left { gap: 8px; } /* Sticky dashboard tabs — mobile guideline §5.2 */ .mvs-dashboard-tab { min-height: 44px; } /* Prevent horizontal overflow on long text */ .mvs-media-title { word-break: break-word; overflow-wrap: break-word; } .mvs-media-author-name { max-width: 150px; } .mvs-grid-item-info { max-width: 100%; overflow: hidden; } .mvs-grid-item-author { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; } /* Single media — sticky bottom action bar */ .mvs-social-bar { position: sticky; bottom: 0; background: var(--mvs-bg); border-top: 1px solid var(--mvs-border-light); padding: 8px 16px; margin: 0 -16px; z-index: 5; } .mvs-social-actions { flex-wrap: wrap; } /* Notification bell touch target */ .mvs-notification-bell { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; } /* Upload dropzone larger on mobile */ .mvs-dashboard-dropzone { min-height: 120px; } /* Tag cloud horizontal scroll */ .mvs-tag-cloud { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 8px; } .mvs-tag-cloud-item { min-height: 36px; padding: 6px 12px; } /* Modal full-screen on mobile */ .mvs-modal { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; margin: 0; } .mvs-modal-body { max-height: calc(100vh - 120px); overflow-y: auto; } } /* Bottom navigation bar for mobile logged-in users */ @media (max-width: 600px) { .mvs-explore-header h1 { font-size: 1.25rem; } .mvs-explore-search input { font-size: 16px; /* Prevent zoom on iOS */ } .mvs-media-grid.mvs-cols-3, .mvs-media-grid.mvs-cols-4, .mvs-media-grid.mvs-cols-5 { grid-template-columns: repeat(2, 1fr); } .mvs-dashboard-grid { grid-template-columns: repeat(2, 1fr); } .mvs-dashboard-card-actions { flex-wrap: wrap; } /* Comment form stacked on mobile */ .mvs-comment-form { flex-direction: column; } .mvs-comment-form button { align-self: flex-end; } } /* ========================================================================== RTL Support ========================================================================== */ [dir="rtl"] [dir="rtl"] [dir="rtl"] [dir="rtl"] [dir="rtl"] .mvs-grid-item-info { flex-direction: row-reverse; } [dir="rtl"] .mvs-grid-item-overlay { text-align: right; } [dir="rtl"] .mvs-search-bar { flex-direction: row-reverse; } [dir="rtl"] .mvs-search-field { flex-direction: row-reverse; } [dir="rtl"] .mvs-activity-media-remove { right: auto; left: 4px; } [dir="rtl"] .mvs-explore-header { text-align: right; } [dir="rtl"] .mvs-tag-cloud { direction: rtl; } [dir="rtl"] [dir="rtl"] [dir="rtl"] .mvs-logged-out-banner__content { text-align: right; } [dir="rtl"] .mvs-logged-out-banner__close { right: auto; left: 16px; } [dir="rtl"] .mvs-chat-trigger { right: auto; left: 20px; } [dir="rtl"] .mvs-bp-album-form, [dir="rtl"] .mvs-bp-album-msg { text-align: right; } /* ========================================================================== Mobile — Search Bar Responsive Fixes ========================================================================== */ @media (max-width: 767px) /* below --mvs-bp-tablet */ { .mvs-search-bar { max-width: 100%; } .mvs-search-mode-btn { padding: 5px 10px; font-size: 0.75rem; } } @media (max-width: 480px) { .mvs-explore-header h1 { font-size: 1.25rem; } .mvs-search-bar { border-radius: var(--mvs-radius-lg); padding: 4px; } .mvs-search-mode { display: none; /* Collapsed on very small screens — defaults to media mode */ } } /* ── Lightbox social sidebar ───────────────────────────────────────── */ .mvs-lightbox-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 2.5vh 2.5vw; /* ~5% breathing room on every edge so the */ box-sizing: border-box; /* lightbox doesn't bleed into theme chrome */ animation: mvs-fade-in 0.2s ease; } .mvs-lightbox { position: relative; display: flex; width: 100%; height: 100%; max-width: 95vw; /* explicit caps reinforce the inset padding */ max-height: 95vh; /* Container background matches the inner surfaces so the rounded corners never expose a lighter sliver when --mvs-surface resolves to white in a theme that doesn't define a dark variant. The outer overlay scrim handles the page-backdrop dimming. */ background: transparent; border-radius: 12px; overflow: hidden; animation: mvs-slide-up 0.3s ease; } .mvs-lightbox-close { position: absolute; top: 12px; right: 12px; z-index: 10; background: rgba(0, 0, 0, .5); border: none; border-radius: 50%; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; /* Always-light icon — the backdrop is rgba(0,0,0,.5) regardless of theme, so referencing --mvs-surface (which flips dark in dark mode) turned the close icon invisible (dark on dark). The lightbox itself overlays the page with a dark veil, so #fff is the right fixed choice here. */ color: #fff; } .mvs-lightbox-close:hover { background: rgba(0, 0, 0, .7); } /* Fullscreen toggle — sits just left of the close button, same pill treatment. */ .mvs-lightbox-fullscreen { position: absolute; top: 12px; right: 64px; z-index: 10; background: rgba(0, 0, 0, .5); border: none; border-radius: 50%; width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #fff; } .mvs-lightbox-fullscreen:hover, .mvs-lightbox-fullscreen:focus-visible { background: rgba(0, 0, 0, .7); } /* Swap expand/compress icon by state (the fullscreen class rides on .mvs-lightbox). */ .mvs-lightbox-fs-compress { display: none; } .mvs-lightbox--fullscreen .mvs-lightbox-fs-expand { display: none; } .mvs-lightbox--fullscreen .mvs-lightbox-fs-compress { display: block; } /* Fullscreen: fill the viewport and hide the comments sidebar so the media gets the whole space (customer request, Basecamp 9822552686). The media pane is flex:1, so it expands on its own once the sidebar is gone. */ .mvs-lightbox--fullscreen { max-width: 100vw; max-height: 100vh; border-radius: 0; } .mvs-lightbox--fullscreen .mvs-lightbox-sidebar { display: none; } .mvs-lightbox-close svg { width: 20px; height: 20px; } .mvs-lightbox-loading { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; } .mvs-lightbox-media { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; position: relative; } /* The wrapper is the actual flex item — the is its child, not * a child of .mvs-lightbox-media. Nothing styled `picture` at all, so it had no * definite height: `height: 100%` on the img resolved against an indefinite * containing block, fell back to `auto`, the img rendered at its intrinsic * height, and `.mvs-lightbox { overflow: hidden }` silently cut the overflow. * With align-items:center the cut splits top and bottom, which is why tall * portraits lost their heads and feet (Basecamp #10153546608). Measured before * this rule: a 900x1600 upload rendered a 1351px-tall inside a 739px * media box — 612px clipped. * * Constraining `picture` gives the img a definite box to contain into. Video * and audio are direct children of .mvs-lightbox-media and were never affected, * which is the asymmetry that confirmed the diagnosis. */ .mvs-lightbox-media picture { display: flex; align-items: center; justify-content: center; /* Definite, not just capped. max-height alone leaves the height * indeterminate, so the img's `height: 100%` still resolved to auto and it * kept rendering at intrinsic size inside a correctly-sized picture. */ width: 100%; height: 100%; min-width: 0; min-height: 0; } .mvs-lightbox-media img { /* Sized by the max-* pair, not width/height 100%, so object-fit has a real * box to contain into and the image scales DOWN to fit rather than * overflowing its parent. */ width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; display: block; } /* `display: flex` above beats the HTML `hidden` attribute — the same trap the * img/video/audio rule below already documents. shared-ui-frame.php binds * data-wp-bind--hidden on the to swap between image and video items, * so without this a hidden would keep rendering over the video. */ .mvs-lightbox-media picture[hidden] { display: none !important; } .mvs-lightbox-media img[hidden], .mvs-lightbox-media video[hidden], .mvs-lightbox-media audio[hidden] { display: none !important; } .mvs-lightbox-video { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0; background: #000; } .mvs-lightbox-audio { width: min(400px, 80%); display: block; border-radius: 12px; padding: 8px; filter: invert(1); } .mvs-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, .85); border: none; border-radius: 50%; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); } .mvs-lightbox-nav:hover { background: var(--mvs-surface); } .mvs-lightbox-nav--prev { left: 12px; } .mvs-lightbox-nav--next { right: 12px; } .mvs-lightbox-position { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .6); color: var(--mvs-surface); padding: 4px 12px; border-radius: 12px; font-size: 13px; } /* Sidebar */ .mvs-lightbox-sidebar { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; border-left: 1px solid var(--mvs-border-light); overflow-y: auto; background: var(--mvs-surface); } .mvs-lightbox-author { padding: 14px 16px; border-bottom: 1px solid var(--mvs-border-light); } .mvs-lightbox-author-link { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .mvs-lightbox-author-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .mvs-lightbox-stats { padding: 6px 16px; font-size: 13px; color: var(--mvs-text-secondary); } .mvs-lightbox-reactions { display: flex; gap: 2px; padding: 8px 16px; border-bottom: 1px solid var(--mvs-border-light); } .mvs-lightbox-reaction { background: transparent; border: 1px solid transparent; /* No "color patches" at rest — borders */ border-radius: 20px; /* only appear on hover/active state to */ padding: 4px 10px; /* keep the strip clean against the */ cursor: pointer; /* light sidebar background */ min-block-size: var(--mvs-touch-min, 44px); justify-content: center; font-size: 14px; display: flex; align-items: center; gap: 4px; transition: background .15s, border-color .15s; } .mvs-lightbox-reaction>span:empty { display: none; } .mvs-lightbox-reaction:hover { background: var(--mvs-surface-2); border-color: var(--mvs-border-light); } .mvs-lightbox-reaction.active { background: var(--mvs-info-bg); border-color: var(--mvs-primary); color: var(--mvs-primary-text, var(--mvs-primary)); } /* Action toolbar — 5 buttons (Favorite / Share / Download / Open / Report) share the row evenly. flex:1 + space-between makes them auto-fit the sidebar at any width without horizontal scroll. The previous design used inline-flex + margin-left:auto on Report which overflowed the 380 px sidebar (5 × ~70 px + gaps + padding ≈ 414 px). Customer reported a horizontal scrollbar on both desktop and mobile. */ .mvs-lightbox-actions { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--mvs-border-light); justify-content: space-between; align-items: stretch; flex-wrap: nowrap; } .mvs-lightbox-action { display: flex; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; font-size: 13px; padding: 6px 2px; text-align: center; border-radius: 6px; text-decoration: none; color: var(--mvs-text); /* Overflow is handled on .mvs-lightbox-action__label, not here. A bare text node in a display:flex button becomes an anonymous flex item, which text-overflow cannot reach - so the nowrap/overflow/text-overflow trio that used to live on this rule silently did nothing and "Download" was hard-cut at 56px. Basecamp 10286532431. */ line-height: 1.15; } /* The label owns its own truncation. display:block (not a flex item) is what makes text-overflow work at all; max-width keeps it inside the 56px column the fixed 6-7 button track allows. Degrades to "Herunterl..." rather than a mid-word break or an invisible word, which matters more for translations than for English - "Download" only overruns by 1.8px, "Herunterladen" by 30. */ .mvs-lightbox-action__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 11px is what actually fits. Measured in the 380px sidebar: the 6-7 button track gives each label a 52px content box, and "Download" - the longest English label - needs 57.8px at 13px, 53.4px at 12px, 48.9px at 11px. 13px was never wide enough; it only looked fine because the clip was 1.8px. The ellipsis above is the safety net for translations, not for English. */ font-size: 11px; } .mvs-lightbox-action:hover, .mvs-lightbox-action:focus { background: var(--mvs-surface-2); color: var(--mvs-text); border: none; } .mvs-lightbox-action.active { color: var(--mvs-danger); } .mvs-lightbox-action [data-lucide], .mvs-lightbox-action svg { width: 18px; height: 18px; stroke-width: 2; } /* Theme defense for the lightbox controls — keep the reaction pills and action buttons clean (no theme-injected fill/border/radius) so the lightbox reads as a premium, uncluttered surface on any theme. !important guards against themes that style bare